移动端网页 CSS 动画延迟为何设置无效？检查 animation-delay 属性
检查 animation-delay 属性时需确认单位是否正确且未与滚动驱动动画冲突。
确认单位与语法是否正确
animation-delay 属性必须包含时间单位，仅写数字会导致样式失效。根据资料，该属性指定从应用动画到开始执行之间的等待时间，单位可以是秒或毫秒。例如设置 animation-delay: 2s 或 250ms 才能生效，若省略单位则浏览器无法解析。此外，该属性接受负值，负值会使动画立即开始但跳过指定时间点。检查时需确保每个值都带有 s 或 ms 单位，且语法符合规范。
如果同时设置了多个动画，需注意逗号分隔的值顺序与动画名称列表对应。资料指出，当在 animation-* 属性中指定多个逗号分隔值时，它们按动画名称出现的顺序应用。若数值数量与动画名称不匹配，可能导致部分动画延迟设置无效。建议先简化为单动画测试，确保单位无误后再扩展到多动画场景。
排查与滚动驱动动画的冲突
animation-delay 在滚动驱动动画中可能不生效。资料明确说明，该属性对 CSS 滚动驱动动画没有影响。滚动驱动动画使用 animation-timeline 属性关联滚动进度，其开始时间由滚动位置决定，而非延迟时间。若页面使用了滚动驱动动画，需检查是否错误地依赖 animation-delay 来控制动画时机。
解决方法是移除滚动驱动动画元素的 animation-delay 设置，改用 animation-timeline 或 animation-range 属性控制动画进度。例如，通过 animation-range-start 和 animation-range-end 定义动画在滚动条上的起止位置。验证时，可移除 animation-delay 并观察动画是否按预期随滚动触发，从而确认冲突已排除。
验证动画是否被其他属性覆盖
animation-delay 可能被其他动画属性或继承规则覆盖。资料提到，该属性的初始值为 0s，且不继承。如果父元素设置了 animation-delay: inherit，子元素可能继承该值而非自定义值。此外，简写属性 animation 可能覆盖部分延迟设置。检查时需确保自定义延迟未被简写属性中的其他值覆盖。
建议单独测试 animation-delay 属性，确保其未被其他 CSS 规则干扰。例如，在浏览器开发者工具中检查计算后的样式，确认 animation-delay 的值是否为预期。若发现值被重置，需检查是否有更高优先级的规则或简写属性冲突。通过逐步移除其他动画属性，可定位导致延迟失效的具体原因。
复现检查步骤与结果判断
复现检查步骤如下：首先在目标元素上设置 animation-delay: 2s，并确保其他动画属性（如 animation-name 和 animation-duration）已正确配置。然后使用浏览器开发者工具的元素检查器，查看计算后的样式是否显示 animation-delay: 2s。若显示为 0s 或无效，说明设置未生效。
若延迟设置无效，需按顺序排查：检查单位是否缺失，确认未与滚动驱动动画冲突，并验证无其他属性覆盖。若单位正确且无冲突，但延迟仍不生效，可能是浏览器兼容性问题。资料指出该属性自 2015 年起广泛支持，但旧版浏览器可能存在差异。最终结果判断应基于计算样式与实际动画表现的一致性。
资料与延伸阅读
你可以通过以下原始资料核对文中概念，并继续深入阅读。