css3 动画循环次数

CSS3是一种强大的样式表语言，它可以帮助我们实现各种各样的动画效果。其中，设置动画循环次数也是CSS3动画中常用的功能。在CSS3中，我们可以使用animation-iteration-count属性来设置动画循环的次数。

  .Box {
    animation-name: move;
    animation-duration: 2s;
    animation-iteration-count: infinite; /* 循环次数为无限 */
  }

  @keyframes move {
    from {transform: translateX(0);}
    to {transform: translateX(200px);}
  }

上述代码中，我们定义了一个名为“move”的动画，让.Box元素在2秒内从初始位置水平向右移动200像素。而animation-iteration-count属性的值为“infinite”，表示让动画无限循环播放。

当然，我们也可以设置动画循环的具体次数。例如，下面的代码让动画循环3次，就会在第3次结束以后停止播放：

  .Box {
    animation-name: move;
    animation-duration: 2s;
    animation-iteration-count: 3; /* 循环3次 */
  }

  @keyframes move {
    from {transform: translateX(0);}
    to {transform: translateX(200px);}
  }

总的来说，通过CSS3中的animation-iteration-count属性，我们可以实现灵活的动画播放循环次数设置，从而达到更好的动画效果。