CSS动画迭代（Animation Iteration）

CSS动画迭代（Animation Iteration）

CSS动画迭代是指动画效果重复播放的次数或无限循环的设置。通过控制animation-iteration-count属性，开发者可以定义动画在触发后执行的次数，从而实现重复播放效果或单次播放后停止。

介绍

在CSS动画中，迭代次数决定了动画重复执行的次数。默认情况下，动画仅播放一次（animation-iteration-count: 1），但通过调整该属性，可以实现以下效果：

• 有限次数的重复（如2次、3次）
• 无限循环（infinite）
• 小数次数的部分播放（如0.5次播放到动画的一半）

语法与属性

animation-iteration-count属性的语法如下：

animation-iteration-count: number | infinite;

其中：

• number：正整数或小数，表示动画播放次数（如2、1.5）。
• infinite：动画无限循环。

代码示例

基础示例

以下代码展示了一个旋转方块动画，重复3次后停止：

@keyframes rotate {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.box {
  width: 100px;
  height: 100px;
  background-color: red;
  animation-name: rotate;
  animation-duration: 2s;
  animation-iteration-count: 3;
}

输出效果：红色方块旋转3次（每次2秒），共6秒后停止。

无限循环示例

.box {
  animation-iteration-count: infinite;
}

输出效果：红色方块无限旋转。

小数次迭代

.box {
  animation-iteration-count: 0.5;
}

输出效果：红色方块旋转180度（360° × 0.5）后停止。

实际应用场景

1. 加载动画：无限旋转的加载图标（infinite）。 2. 提示效果：按钮悬停时抖动3次吸引注意力。 3. 进度指示：通过小数迭代实现动画中途暂停（如0.5次表示50%进度）。

与其他属性的关系

• animation-direction：迭代次数受方向影响。例如，alternate会让动画反向播放，实际迭代次数可能翻倍。
• animation-fill-mode：定义动画结束后的状态（如保持最后一帧）。

性能考虑

无限循环动画（infinite）可能导致不必要的性能消耗，尤其在移动设备上。建议：

• 对非必要动画限制迭代次数。
• 使用will-change: transform优化硬件加速。

高级用法

动态控制迭代

通过JavaScript动态修改迭代次数：

document.querySelector('.box').style.animationIterationCount = "5";

数学公式与迭代

若动画时间为$t$，迭代次数为$n$，则总时长为： $\text{总时长}=t\times n$

图表说明

pie title 动画迭代次数分布 "1次" : 40 "2-5次" : 30 "infinite" : 30

浏览器兼容性

所有现代浏览器均支持animation-iteration-count，包括：

• Chrome 43+
• Firefox 16+
• Safari 9+
• Edge 12+

总结

CSS动画迭代是控制动画重复行为的关键属性，适用于有限次数播放或无限循环场景。通过合理设置，可平衡视觉效果与性能。初学者应注意： 1. 默认值为1（播放一次）。 2. 小数次迭代可实现部分动画效果。 3. 无限循环需谨慎使用以避免性能问题。