[分享]css3怎么设置无限循环动画

CSS3是现代前端开发中非常重要的一个技术，它可以实现许多漂亮的动画效果。在本文中，我们将会讲述如何使用CSS3设置无限循环动画。.animation { animation: infiniteLoo...

CSS3是现代前端开发中非常重要的一个技术，它可以实现许多漂亮的动画效果。在本文中，我们将会讲述如何使用CSS3设置无限循环动画。

.animation {
  animation: infiniteLoop 2s infinite;
}

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

上面代码中，我们定义了一个名为“animation”的类，它使用了CSS3的animation属性，并设置了两个参数：动画名称“infiniteLoop”和时间长度2秒。第三个参数“infinite”表示这个动画应该无限循环。

下面是我们定义无限循环动画的关键帧（keyframes）代码，即@keyframes规则。我们将动画从0%（起始点）到100%（终止点）设置了360度旋转。

你可以自由修改这个代码，来实现其他类型的无限循环动画。

.animation {
  animation: infiniteLoop 2s infinite;
}

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

上述代码演示的是一个放大/缩小并渐隐/渐现的动画。

在CSS3中，设置无限循环动画是非常容易的。你只需使用animation和@keyframes两个属性，并加上infinite参数就可以实现无限循环动画。如果你想了解更多关于CSS3动画的技术，请参考它的官方文档。