CSS动画animation-delay未生效，主因是动画状态被样式覆盖、元素隐藏或JS重置；需检查computed值、避免display:none、确保animation-play-state为running。
CSS动画设置了 animation-delay 却没按预期延迟执行，通常不是语法写错了，而是动画状态被其他样式干扰或重置了。重点检查以下几处：
动画是否被后续样式覆盖
浏览器按 CSS 层叠顺序（就近、权重高者生效）应用样式。如果在延迟设置后，又用另一个规则把 animation 或 animation-name 改成 none、空值，或直接重写了整个 animation 简写属性，延迟就会失效。
- 检查开发者工具中元素的“Computed”面板，看
animation-delay最终计算值是否为你设置的数值 - 注意简写属性
animation: ...会重置所有子属性（包括delay），哪怕你只改了其中一项 - 避免在多个选择器中反复设置
animation，建议统一用一个类控制动画启停和参数
元素是否在延迟期间被隐藏或移除
animation-delay 只在元素处于渲染树中且可见时起作用。如果延迟开始前元素被设为 display: none、visibility: hidden，或尚未插入 DOM，动画将不会启动（即使 delay 结束也不会补上）。
-
display: none会完全跳过动画（包括延迟阶段），恢复显示后需重新触发 -
visibility: hidden元素仍参与布局，动画会照常计时，但你看不到效果；延迟结束后若仍是 hidden，依然不可见 - 动态插入的元素，确保添加到 DOM 后再设置动画类，或用
setTimeout延迟加类（不推荐），更稳妥的是监听DOMContentLoaded或使用requestAnimationFrame
动画是否被 JavaScript 中断或重置
JS 操作样式时容易无意清空动画状态。例如：
立即学习“前端免费学习笔记（深入）”；
- 给元素设置
element.style.animation = ''或element.style.animationName = 'none'，会立即终止当前动画并重置 delay 计时 - 切换 class 时，若新 class 不含
animation相关声明，旧动画会被清除 - 用
getComputedStyle读取animation属性后立刻修改，可能触发重排导致动画中断（罕见但存在）
是否误用了 animation-play-state
如果设置了 animation-play-state: paused，即使 delay 结束，动画也会卡在初始帧不动。尤其要注意父元素或全局样式中是否有未察觉的 paused 规则。
- 检查 computed 样式中
animation-play-state是否为running - 避免对动画元素设置
animation-play-state: paused后忘记恢复 - 慎用通配符选择器如
* { animation-play-state: paused !important; }—— 它会让所有动画“静音”
不复杂但容易忽略。核心是：延迟生效的前提是动画能正常挂载、持续计时、且未被中途打断。打开开发者工具，盯着 computed 动画属性看，比猜更准。
