CSS3 animation-iteration-count 属性

animation-iteration-count 属性指定动画播放的次数。默认值为 1，意味着动画将只播放一次。你也可以设置为 infinite，使动画无限循环播放。

语法

animation-iteration-count: <number> | infinite;

• <number> 表示动画播放的次数，可以是整数或小数，如 2 或 0.5。
• infinite 表示动画无限循环播放。

示例

// www.javascriptcn.com code example
/* 让动画播放两次 */
.element {
  animation-name: slide-in;
  animation-duration: 2s;
  animation-iteration-count: 2;
}

/* 让动画无限循环播放 */
.element {
  animation-name: spin;
  animation-duration: 3s;
  animation-iteration-count: infinite;
}

在上面的示例中，我们展示了如何使用 animation-iteration-count 属性来控制动画的播放次数。你可以根据需要设置动画播放的次数，或者让动画无限循环播放。这个属性对于制作循环动画或者只想播放几次的动画非常有用。