编辑“︁CSS动画迭代（Animation Iteration）”︁（章节）

= CSS动画迭代（Animation Iteration） =

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

== 介绍 ==
在CSS动画中，迭代次数决定了动画重复执行的次数。默认情况下，动画仅播放一次（<code>animation-iteration-count: 1</code>），但通过调整该属性，可以实现以下效果：
* 有限次数的重复（如2次、3次）
* 无限循环（<code>infinite</code>）
* 小数次数的部分播放（如0.5次播放到动画的一半）

== 语法与属性 ==
<code>animation-iteration-count</code>属性的语法如下：
<syntaxhighlight lang="css">
animation-iteration-count: number | infinite;
</syntaxhighlight>
其中：
* '''number'''：正整数或小数，表示动画播放次数（如<code>2</code>、<code>1.5</code>）。
* '''infinite'''：动画无限循环。

== 代码示例 ==

=== 基础示例 ===
以下代码展示了一个旋转方块动画，重复3次后停止：
<syntaxhighlight lang="css">
@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;
}
</syntaxhighlight>
'''输出效果'''：红色方块旋转3次（每次2秒），共6秒后停止。

=== 无限循环示例 ===
<syntaxhighlight lang="css">
.box {
  animation-iteration-count: infinite;
}
</syntaxhighlight>
'''输出效果'''：红色方块无限旋转。

=== 小数次迭代 ===
<syntaxhighlight lang="css">
.box {
  animation-iteration-count: 0.5;
}
</syntaxhighlight>
'''输出效果'''：红色方块旋转180度（360° × 0.5）后停止。

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

== 与其他属性的关系 ==
* '''<code>animation-direction</code>'''：迭代次数受方向影响。例如，<code>alternate</code>会让动画反向播放，实际迭代次数可能翻倍。
* '''<code>animation-fill-mode</code>'''：定义动画结束后的状态（如保持最后一帧）。

== 性能考虑 ==
无限循环动画（<code>infinite</code>）可能导致不必要的性能消耗，尤其在移动设备上。建议：
* 对非必要动画限制迭代次数。
* 使用<code>will-change: transform</code>优化硬件加速。

== 高级用法 ==
=== 动态控制迭代 ===
通过JavaScript动态修改迭代次数：
<syntaxhighlight lang="javascript">
document.querySelector('.box').style.animationIterationCount = "5";
</syntaxhighlight>

=== 数学公式与迭代 ===
若动画时间为<math>t</math>，迭代次数为<math>n</math>，则总时长为：
<math>\text{总时长} = t \times n</math>

== 图表说明 ==
<mermaid>
pie
    title 动画迭代次数分布
    "1次" : 40
    "2-5次" : 30
    "infinite" : 30
</mermaid>

== 浏览器兼容性 ==
所有现代浏览器均支持<code>animation-iteration-count</code>，包括：
* Chrome 43+
* Firefox 16+
* Safari 9+
* Edge 12+

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

[[Category:编程语言]]
[[Category:CSS]]
[[Category:CSS动画]]