移动端 CSS 动画为何只播放一次？检查 animation-iteration-count 属性
本篇解释 CSS 动画默认播放次数为一次的原因，说明如何通过设置数值或 infinite 属性实现循环播放。
动画默认只播放一次的原因
CSS 动画默认情况下只播放一个完整的周期后就会停止。这是因为 animation-iteration-count 属性的初始值为 1，表示动画播放一次后结束。如果希望动画重复播放，必须显式修改这个属性的值。MDN 文档指出，该属性用于设置动画序列在停止前应该播放的次数，不设置时默认为 1。
在移动端网页开发中，开发者常误以为添加了动画类就会自动循环。实际上，如果没有指定重复次数，动画只会执行一次。例如，当使用简写属性 animation 时，如果未包含 animation-iteration-count，浏览器将使用默认值 1。这导致动画在第一遍结束后立即停止，无法满足轮播、加载等常见交互需求。
设置动画重复次数的方法
可以通过直接设置 animation-iteration-count 的值来控制动画重复次数。该属性接受一个数字，表示动画播放的次数。例如，设置为 2 表示动画会完整播放两次，设置为 3 表示播放三次。MDN 提供的示例显示，可以使用 2.4 这样的非整数值，让动画播放 2.4 个周期，即播放两个完整周期后播放剩余的 40%。
如果希望动画无限循环播放，可以使用关键字 infinite。该值会让动画持续运行，直到页面卸载或动画被移除。MDN 文档明确说明，infinite 是一个有效的关键字，用于创建无限循环的动画。在移动端设计中，无限循环常用于加载指示器或背景动态效果，以提供持续的视觉反馈。
检查与验证动画播放结果
在移动端浏览器中检查动画是否按预期重复播放，可以通过开发者工具或直接在设备上观察。首先，确保 CSS 中已正确应用 animation-iteration-count 属性。例如，在样式中添加 animation-iteration-count: 3;。然后，在移动设备上打开网页，观察动画是否播放了三次。如果动画只播放了一次，可能是属性未生效或被其他样式覆盖。
验证无限循环动画时，可以观察动画是否持续运行。如果动画在播放一段时间后停止，可能是浏览器兼容性问题或动画被意外移除。MDN 提到，该属性在 2015 年 9 月起在各大浏览器中广泛可用，但在极少数旧版本设备上可能存在兼容性差异。确保目标设备支持该属性是验证结果的前提。
滚动驱动动画中的特殊注意事项
在使用滚动驱动动画时，animation-iteration-count 的行为会有所不同。MDN 文档指出，在滚动驱动动画中，指定动画重复次数会让动画在时间轴的进度中重复该次数。如果未提供该属性，动画只会发生一次。这意味着在滚动驱动的场景下，必须显式设置重复次数才能实现预期的循环效果。
需要注意的是，在滚动驱动动画中使用 infinite 值会导致动画无法正常工作。MDN 明确说明，infinite 是滚动驱动动画中的有效值，但会导致动画失效。因此，在滚动驱动的场景下，应避免使用 infinite，而是根据需求设置具体的数字次数，以确保动画能够正确执行。
资料与延伸阅读
你可以通过以下原始资料核对文中概念，并继续深入阅读。