移动端动画卡顿？检查 animation-duration 单位与取值

检查动画时间单位是否为秒或毫秒

animation-duration 属性用于设置动画完成一个周期所需的时间，必须使用秒或毫秒作为单位。如果只写了数字而没有单位，浏览器会忽略该声明。在移动端调试时，应确保每个时间值后面都紧跟 s 或 ms。例如，正确的写法是 3s 或 750ms，错误的写法是 3。

移动端浏览器对 CSS 解析的容错率较低，缺少单位会导致动画完全无法执行。开发者工具的 Elements 面板中，如果该属性的值显示为空或被划掉，说明单位缺失。检查时需逐个核对动画相关的所有 duration 属性，确保每个值都包含有效的单位。

该属性的时间值必须是非负数，可以是零或正数。如果设置了负值，浏览器会忽略该声明，导致动画不执行。例如，-1s 是无效的。在代码审查中，应排除所有负数的时间设置，确保所有 duration 值都大于等于零。

当动画持续时间被设置为零时，动画会立即完成，但可见效果取决于 animation-fill-mode 的设置。如果 fill-mode 为 none，动画将没有可见效果。在移动端测试时，可以尝试将 duration 设为 0s 并观察动画状态，以验证其是否符合预期。

当页面包含多个动画时，animation-duration 可以使用逗号分隔的列表来设置。此时，值的顺序必须与 animation-name 中定义的动画顺序一致。如果列表中的值数量与动画数量不匹配，浏览器会按顺序应用值，多余的值会被忽略。

在移动端调试时，可以通过开发者工具查看计算后的样式。如果发现某个动画的 duration 值与预期不符，可能是列表长度不匹配导致的。检查时需确保 duration 列表中的值数量与动画名称列表中的名称数量一致，或者至少不小于动画数量。

在移动端浏览器中打开开发者工具，选中应用了动画的元素。在 Styles 面板中查看 animation-duration 的计算值。如果值显示为 auto，说明该属性未显式设置，浏览器将使用默认值。如果值显示为无效或被划掉，说明存在语法错误。

可以通过修改样式并观察动画行为来验证结果。例如，将 duration 从 3s 改为 6s，动画速度应明显变慢。如果修改后动画无变化，说明该属性可能被其他规则覆盖或存在语法错误。确保所有修改都保存并刷新页面后生效。