animation-delay 决定动画开始时间而非暂停，仅对已生效动画起作用；需确保@keyframes存在、元素已挂载、animation-name未遗漏、单位为s/ms，负值可跳播，多动画时delay须一一对应。
animation-delay 不是让动画“暂停”，而是决定它“什么时候开始”。设了但没效果？大概率不是写法错，而是触发条件没满足。
animation-delay 的基本写法和单位限制
只接受 s 或 ms 单位，不支持百分比、auto 或无单位数字。负值合法，表示跳过动画前段直接切入中间帧。
-
animation-delay: 0.8s：样式生效后等 800 毫秒再从头播放 -
animation-delay: -1.2s：立即开始，但显示的是原动画第 1.2 秒对应的状态（前提是animation-duration≥ 1.2s） -
animation-delay: 0或省略该属性：动画触发即执行
为什么写了 animation-delay 却没延迟？
最常见原因是动画根本没被激活——animation-delay 只对已生效的动画起作用，而动画生效依赖完整链路：
html-to-pptx-converter
下载
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
- @keyframes 名称拼错或缺失，整个
animation属性会静默失效 - 元素初始为
display: none或未挂载到 DOM，计时器压根不启动 - 用了
animation简写但漏掉animation-name，比如只写animation: 0.4s ease - 没配
animation-fill-mode: forwards，延迟期间元素仍显示原始样式，误以为“没反应”
多个动画同时设置 delay 怎么写才不乱？
用逗号分隔多个动画时，animation-delay 必须一一对应，顺序不能错，也不共享、不叠加：
div {
animation: slide 2s, fade 1.5s;
animation-delay: 0.5s, 1s;
}
- 第一个动画
slide延迟 0.5 秒开始 - 第二个动画
fade延迟 1 秒开始 - 如果只写一个
animation-delay: 0.5s，第二个动画会按默认值0s启动 - 值数量不匹配时，多余值被忽略，不足则循环补零（不推荐依赖此行为）
JS 动态改 delay 为什么经常无效？
直接赋值 el.style.animationDelay = '300ms' 看似简单，但极易被 CSS 简写覆盖：
- 若已有
animation: bounce 0.6s这类简写规则，JS 设置的animationDelay会被重置为初始值 - 必须确保单位明确（
'300ms'有效，300无效） - 更稳妥的做法是用 class 控制，比如
el.classList.add('delay-300')，把 delay 值全留在 CSS 里 - 若必须 JS 改，建议用
el.style.setProperty('animation-delay', '300ms')避免被简写吞掉
真正容易被忽略的点在于：延迟是否生效，不取决于你写了什么，而取决于元素是否完成了样式计算并进入渲染流程。哪怕只是 opacity: 0 + visibility: hidden，只要元素已参与 layout，animation-delay 就能正常倒数；但一旦涉及 display: none 或异步插入，就得靠 JS 显式控制时机或强制重排。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
