css3动画重复播放的代码

CSS3动画可以通过重复播放来实现循环效果。要实现动画的重复播放，我们可以使用animation-iteration-count属性来指定动画的重复次数。该属性可以接受一个整数值，表示动画的重复次数，或者使用关键字"infinite"表示无限次重复播放动画。

让我们来看一个简单的示例代码，演示如何使用animation-iteration-count属性来实现动画的重复播放：

@keyframes slide-in {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(0); }
}
.slide-in {
  animation-name: slide-in;
  animation-duration: 2s;
  animation-iteration-count: 3;
}

在上面的示例中，我们定义了一个名为"slide-in"的关键帧动画，它从左侧移动到右侧。动画的起始状态是在0%时，元素位于页面左侧，通过transform属性的translateX函数将元素向左平移100%的距离。动画的结束状态是在100%时，元素位于页面正常位置，通过transform属性的translateX函数将元素平移回原来的位置。

接下来，我们通过在.slide-in类中应用这个动画，来实现动画的重复播放。animation-name属性指定了要使用的动画名称，animation-duration属性指定了动画的持续时间为2秒，animation-iteration-count属性指定了动画的重复次数为3次。

这样，当我们将.slide-in类应用到一个元素上时，该元素就会以动画的形式从左侧移动到右侧，并在2秒内重复播放这个动画3次。

除了使用整数值来指定重复次数，我们还可以使用关键字"infinite"来表示无限次重复播放动画。例如：

.slide-in {
  animation-name: slide-in;
  animation-duration: 2s;
  animation-iteration-count: infinite;
}

在上面的示例中，我们将animation-iteration-count属性的值设置为"infinite"，表示动画将无限次重复播放。

需要注意的是，动画的重复播放是在动画完成后立即开始的。也就是说，如果动画的持续时间为2秒，重复次数为3次，那么整个动画将持续6秒，每次重复播放之间没有间隔。

除了animation-iteration-count属性，CSS3还提供了其他控制动画播放的属性，例如animation-direction属性可以控制动画的播放方向（正向、反向或交替播放）、animation-delay属性可以延迟动画的播放等。这些属性的结合使用可以实现更加复杂和多样化的动画效果。

通过使用animation-iteration-count属性，我们可以轻松地实现CSS3动画的重复播放效果。无论是指定具体的重复次数，还是使用关键字"infinite"表示无限次重复播放，都可以通过这个属性来控制动画的重复播放次数。还可以结合其他的动画属性来实现更加复杂和多样化的动画效果。