[分享]css动画播放次数循环

CSS动画播放次数循环是指我们可以在CSS中设置动画播放的次数，可以选择让动画循环播放，也可以设置动画只播放一次。接下来我们就来学习一下如何在CSS中设置动画的播放次数与循环。/ 设置动画播放次数 /...

CSS动画播放次数循环是指我们可以在CSS中设置动画播放的次数，可以选择让动画循环播放，也可以设置动画只播放一次。接下来我们就来学习一下如何在CSS中设置动画的播放次数与循环。

/* 设置动画播放次数 */
animation-iteration-count: 3; /* 播放3次 */
animation-iteration-count: infinite; /* 无限循环播放 */

/* 设置动画循环 */
animation-direction: normal; /* 默认，动画只播放一次 */
animation-direction: alternate; /* 动画交替播放，正反交替播放 */
animation-direction: reverse; /* 反向播放 */
animation-direction: alternate-reverse; /* 反向交替播放 */

/* 例子：设置动画播放次数循环 */
.box {
  animation: myanimation 3s infinite alternate-reverse;
}

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

以上代码展示了如何通过CSS设置动画的播放次数与循环，我们可以使用animation-iteration-count来设置动画的播放次数，也可以使用animation-direction来设置动画的播放方向，如交替播放或反向播放。

在例子中，我们给.box元素设置了一个名为myanimation的动画，设置了3秒的动画时长，无限循环播放，并且动画播放的方向是交替反向。同时，我们通过@keyframes定义了动画效果，使.box元素在动画过程中旋转360度。

总的来说，设置CSS动画的播放次数循环不仅可以让动画播放更加生动有趣，也可以提升用户体验，为网站增色不少。