[分享]css3动画特效案例

CSS3动画特效在Web开发中越来越受欢迎，它可以用简单的代码实现各种动画效果。下面是一些CSS3动画示例，让我们来看一看吧！/ 旋转动画 / .rotate { animation: rotate ...

CSS3动画特效在Web开发中越来越受欢迎，它可以用简单的代码实现各种动画效果。下面是一些CSS3动画示例，让我们来看一看吧！

/* 旋转动画 */
.rotate {
  animation: rotate 2s linear infinite;
}

@keyframes rotate {
  100% {
    transform: rotate(360deg);
  }
}

/* 滑动动画 */
.slide {
  animation: slide 1s ease-in-out infinite alternate;
}

@keyframes slide {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(200px);
  }
}

/* 渐变动画 */
.fade {
  animation: fade 2s linear infinite;
}

@keyframes fade {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

/* 弹跳动画 */
.bounce {
  animation: bounce 0.5s infinite;
}

@keyframes bounce {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-20px);
  }
}

/* 变形动画 */
.transform {
  animation: transform 2s linear infinite;
}

@keyframes transform {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.5);
  }
  100% {
    transform: scale(1);
  }
} 

在这些示例中，animation属性指定动画名称、持续时间、动画函数和动画重复次数。@keyframes规则定义了动画的每个阶段，包括开始、中间和结束状态。

这些动画效果可以应用于各种Web元素，如文本、图像、按钮等。使用CSS3动画特效可以让网站更加生动、引人注目，增强用户体验。

总之，CSS3动画特效是现代Web开发中不可或缺的一部分。通过简单的CSS代码，我们可以轻松地实现各种动画效果，让网站更加生动、有趣！