[分享]css3动画设置一直运行

CSS3动画设置一直运行的效果可以让网站更加生动，给用户更好的体验。要设置一个永远运行的动画，需要使用CSS3中的animation属性。animation: 轨迹 花费时间 运行形式 时机 无限循环...

CSS3动画设置一直运行的效果可以让网站更加生动，给用户更好的体验。要设置一个永远运行的动画，需要使用CSS3中的animation属性。

animation: 轨迹 花费时间 运行形式 时机 无限循环; 

其中，轨迹是指在x轴和y轴上位移的距离，花费时间是指动画的持续时间，运行形式是指动画运行的方式，时机是指动画从何时开始运行，无限循环则表示动画将一直持续运行。

例如，我们要设置一个简单的闪烁动画：

/*设置元素的背景颜色为红色*/
div {
  background-color: red;
  /*设置动画*/
  animation: blink 1s linear infinite;
}

/*定义名为blink的动画*/
@keyframes blink {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
} 

这个动画的轨迹为空，花费时间为1秒，运行形式为线性，时机为立即开始，无限循环。具体动画效果是让元素的透明度在0和1之间切换，从而产生闪烁的效果。

除了闪烁动画，CSS3还支持多种其他类型的动画，例如旋转、放大缩小等。通过用不同的轨迹、花费时间和运行形式，我们可以实现更多种类的动画效果。

综上所述，通过使用CSS3的animation属性，我们可以实现各种生动有趣的动画效果，让网页更具吸引力。