17370845950

使用animation-iteration-count属性控制CSS动画重复次数，可设为数字或infinite实现循环；配合animation-direction可定义播放方向，如alternate实现来回滑动，常用于加载动画等场景。

在CSS中，控制动画重复次数使用 animation-iteration-count 属性。这个属性定义了动画应该播放多少次。

基本语法

animation-iteration-count 的常见取值包括：

• 数字：指定动画播放的具体次数，比如 1、2、3 等。
• infinite：让动画无限循环播放。

示例：

.element {
  animation-name: slide;
  animation-duration: 2s;
  animation-iteration-count: 3; /* 动画播放3次 */
}

设置无限循环

如果希望动画一|直播|放，比如加载动画或轮播效果，可以设为 infinite：

.loading-spinner {
  animation: spin 1s linear infinite;
}

这样动画会持续不断地运行，直到元素被移除或动画被停止。

结合 animation-direction 使用

当动画重复时，可配合 animation-direction 控制播放方向：

• normal：每次从头开始播放。
• alternate：奇数次正向播放，偶数次反向播放。

例如实现来回滑动：

.slide-back-and-forth {
  animation: slide 1s ease-in-out 3 alternate;
}

这段动画会播放3次，第1次正向，第2次反向，第3次又正向（因为是奇数次）。

实际应用建议

在使用 animation-iteration-count 时注意：

• 默认值是 1，即动画只播放一次。
• 小数也合法，如 2.5 表示播放2次完整动画加一半。
• 与 animation-fill-mode 配合使用，可控制动画结束后元素的状态。

基本上就这些，合理设置重复次数能让页面动效更自然流畅。