移动端 CSS 动画为何看起来像没播放？检查 animation-duration 属性
检查 animation-duration 属性是否设置为 0s，确认动画时长设置正确。
检查动画时长是否被设置为 0s
在移动端网页中，CSS 动画可能因为时长设置不当而无法被肉眼察觉。animation-duration 属性用于定义动画完成一个周期所需的时长，如果该属性被设置为 0s，动画将不会产生可见的位移或变化。根据 MDN 文档，当 duration 为 0s 时，动画仍然会执行，但动画的起始和结束事件会被触发，且动画的可见效果取决于 animation-fill-mode 的设置。如果 fill-mode 为 none，动画将没有可见效果。因此，首先需要确认 CSS 规则中 animation-duration 的值是否为 0s，如果是，则动画将不会产生视觉反馈。
排查时，可以在浏览器开发者工具中选中对应的元素，查看其计算样式（Computed Styles）。在计算样式中查找 animation-duration 属性，确认其值是否为 0s。如果该属性未设置，默认值通常为 0s。如果确实为 0s，则需要将其调整为合理的时长，例如 1s 或 500ms，以确保动画能够被肉眼观察到。此外，还需注意 animation-duration 的单位，必须包含时间单位（如 s 或 ms），否则声明将被忽略。
验证动画属性与关键帧定义
除了检查时长，还需确认动画的其他属性是否正确配置，以确保动画能够正常执行。animation-name 属性用于指定动画的名称，必须与 @keyframes 规则中的名称完全匹配。如果名称不匹配，动画将不会执行。同时，animation-timing-function 属性定义了动画的速度曲线，虽然不影响动画是否播放，但会影响动画的视觉效果。如果动画时长为 0s，即使其他属性正确，动画也不会产生可见效果。
如果动画时长已设置为非 0s，但仍然看起来没有播放，可能是由于 animation-play-state 属性被设置为 paused。确保该属性未被意外设置为暂停状态。通过浏览器开发者工具检查元素的计算样式，可以确认所有动画相关属性的值是否符合预期。此外，还需检查 @keyframes 规则是否正确定义了动画的关键帧，确保动画的起始和结束状态有明显的差异，以便在动画播放时能够被肉眼观察到。
排查浏览器兼容性影响
不同浏览器对 CSS 动画的支持程度可能存在差异，尽管 animation-duration 属性在主流浏览器中已广泛可用。根据 MDN 文档，该属性自 2015 年 9 月起在多数浏览器中已稳定支持。然而，某些旧版本浏览器可能存在兼容性问题，导致动画无法正常播放。如果动画在特定浏览器中表现异常，可以尝试添加浏览器前缀或使用 @supports 规则进行兼容性检测。
在实际测试中，可以尝试在目标移动设备的浏览器中打开网页，观察动画是否正常播放。如果动画在特定浏览器中无法播放，可以尝试使用简写属性 animation 来统一设置所有动画相关属性，例如 animation: slide 1s infinite alternate ease-in。这样可以减少因属性设置错误导致的动画异常。通过实际测试确认动画在不同设备上的表现，确保动画在移动端设备上能够稳定运行。
使用简写属性统一设置动画
为了简化代码并避免遗漏属性，可以使用 animation 简写属性一次性设置所有动画相关属性。在简写属性中，animation-duration 的值应紧跟在动画名称之后。例如，animation: slide 1s infinite alternate ease-in。使用简写属性时，需注意属性的顺序和分隔符，确保动画名称、时长、循环次数、方向和缓动函数按正确顺序排列，并用空格分隔。
通过简写属性可以更高效地管理复杂的动画效果，减少因属性设置错误导致的动画异常。例如，如果动画时长被设置为 0s，简写属性可以快速定位并修改该值。此外，简写属性还可以确保所有动画属性的一致性，避免因单独设置某个属性而导致的冲突。通过简写属性，可以更高效地管理移动端网页中的动画效果，确保动画在移动端设备上能够稳定运行。
资料与延伸阅读
你可以通过以下原始资料核对文中概念，并继续深入阅读。