移动端动画只播放一次？检查 animation-iteration-count 属性
检查 animation-iteration-count 属性的取值是否正确，确认动画是否按预期次数循环播放。
确认动画是否按预期次数循环播放
在移动端页面中，如果希望某个元素持续循环播放动画，需要检查该元素的 animation-iteration-count 属性。该属性用于设置动画序列在停止前应该播放的次数。如果未设置该属性或设置值为 1，动画将只播放一次后停止。通过检查该属性，可以确认动画是否按照预期的次数进行循环。
检查时，应查看 CSS 样式表中与该元素相关的动画定义。确认 animation-iteration-count 的具体取值是否符合设计要求。例如，设置 infinite 可以让动画无限循环，设置 2 或 3 则会让动画播放指定次数后停止。如果动画只播放一次，通常是因为未设置该属性或设置了默认值 1。
检查属性取值是否为整数或非整数
animation-iteration-count 属性支持非整数数值，这意味着可以只播放动画周期的一部分。例如，设置 1.5 会播放一个完整的动画周期，然后再播放半个周期。在检查时，应确认属性值是否为非负数。MDN 文档指出，负值是无效的，且该属性的默认值为 1。
如果希望动画播放部分周期，可以尝试设置 0.5 或 1.5 等非整数。但需注意，非整数取值可能会导致动画在播放结束时停在中间状态。在移动端调试时，可以通过浏览器开发者工具查看计算后的属性值，确保其符合预期。
排查多动画属性值的匹配问题
当页面上存在多个动画时，animation-iteration-count 属性可以接受多个逗号分隔的值。这些值会按照动画名称出现的顺序依次应用。如果动画名称的数量与属性值数量不匹配，可能会导致部分动画未按预期循环。检查时应确保动画名称与属性值的数量一致。
例如，如果设置了两个动画名称，但只提供了一个 iteration-count 值，则第二个动画将使用默认值 1。通过检查 CSS 样式表，可以确认动画名称与属性值的对应关系。确保每个动画都有对应的 iteration-count 值，以避免部分动画只播放一次。
验证动画是否因其他属性影响循环
animation-iteration-count 属性本身不会导致动画只播放一次，但其他相关属性可能会影响动画的循环行为。例如，animation-play-state 属性设置为 paused 时，动画会暂停，不会继续循环。检查时应确保动画的播放状态未被意外设置为暂停。
此外，animation-fill-mode 属性可能会影响动画结束后元素的样式。如果设置为 forwards，动画结束后元素将保持最后一帧的样式。虽然这不直接影响循环次数，但可能会影响用户体验。通过检查这些相关属性，可以全面排查动画只播放一次的原因。
资料与延伸阅读
你可以通过以下原始资料核对文中概念，并继续深入阅读。