[分享]css中animation动画怎么循环

在CSS中，我们可以使用animation动画属性来实现网页元素的动画效果。在使用animation动画时，我们通常会遇到一个需求：如何让动画无限循环播放呢？下面我们就来看一下如何实现。首先，我们需要...

在CSS中，我们可以使用animation动画属性来实现网页元素的动画效果。在使用animation动画时，我们通常会遇到一个需求：如何让动画无限循环播放呢？下面我们就来看一下如何实现。

首先，我们需要在animation属性中设置一个循环次数，常用的值为infinite，即无限循环播放。代码如下：

.element {
  animation: example 2s infinite;
}

@keyframes example {
  from {opacity: 0;}
  to {opacity: 1;}
} 

上述代码中，我们设置了一个名为example的动画，该动画将在2秒内循环播放无数次。具体的动画效果是由@keyframes关键字设置的，此处我们将元素的opacity属性由0变化到1，即实现了一个淡入效果。

如果我们想要实现有限循环播放，可以在animation属性中设置一个数字，表示循环的次数。例如，我们要让动画循环播放3次，可以这样写：

.element {
  animation: example 2s 3;
}

@keyframes example {
  from {opacity: 0;}
  to {opacity: 1;}
} 

上述代码中，我们设置了一个名为example的动画，该动画将在2秒内循环播放3次。同样，具体的动画效果是由@keyframes关键字设置的。

总之，在使用animation动画时，我们可以通过设置infinite或者一个数字来控制动画的循环播放次数。在实际开发中，我们可以根据具体需求来选择使用哪个方式。