css3动画不循环

CSS3动画可以通过设置animation-iteration-count属性来控制动画的循环次数。默认情况下，动画会无限循环播放，即animation-iteration-count属性的值为"infinite"。如果我们希望动画只播放一次或者指定次数后停止循环，可以通过将animation-iteration-count属性的值设置为一个具体的数字来实现。

例如，如果我们希望动画只播放一次，可以将animation-iteration-count属性的值设置为1。示例代码如下所示：

.animation {
  animation-name: myAnimation;
  animation-duration: 2s;
  animation-iteration-count: 1;
}
@keyframes myAnimation {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

在上面的示例中，我们定义了一个名为"myAnimation"的动画，它在2秒内将元素的透明度从0变为1。然后，我们将animation-iteration-count属性的值设置为1，表示动画只播放一次。

除了设置为1，我们还可以将animation-iteration-count属性的值设置为其他数字来指定动画循环的次数。例如，如果我们希望动画循环播放3次，可以将animation-iteration-count属性的值设置为3。示例代码如下所示：

.animation {
  animation-name: myAnimation;
  animation-duration: 2s;
  animation-iteration-count: 3;
}
@keyframes myAnimation {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

在上面的示例中，我们将animation-iteration-count属性的值设置为3，表示动画会循环播放3次。

需要注意的是，如果我们希望动画只播放一次或者指定次数后停止循环，我们还可以通过设置animation-fill-mode属性为"forwards"来让动画停留在最后一帧。示例代码如下所示：

.animation {
  animation-name: myAnimation;
  animation-duration: 2s;
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
}
@keyframes myAnimation {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

在上面的示例中，我们设置了animation-fill-mode属性的值为"forwards"，表示动画在播放完一次后会停留在最后一帧的状态。

总结来说，通过设置animation-iteration-count属性的值为一个具体的数字，我们可以控制CSS3动画的循环次数。我们还可以通过设置animation-fill-mode属性为"forwards"来让动画停留在最后一帧。这些属性的灵活运用可以帮助我们实现各种不同的动画效果。