animation-delay仅接受s或ms单位，支持负值（跳过动画前段）；失效主因是@keyframes缺失或名称不匹配；需配合animation-fill-mode:forwards才能在延迟期显示首帧；JS动态修改时须触发重排或延至下一轮事件循环。
animation-delay 的基本用法和单位限制
animation-delay 控制动画在触发后等待多久才开始播放，它只接受 time 类型值（s 或 ms），不支持百分比、auto 或负数以外的其他单位。负值是合法的，表示“从动画中间某处开始播放”，但容易误判起始帧。
- 正数延迟：比如
animation-delay: 0.5s表示元素样式生效后等 500 毫秒再启动动画 - 负数延迟：比如
animation-delay: -1s在一个 2s 动画中，相当于跳过前半段，从第 1 秒处开始播放 - 多个动画时，每个可单独设延迟：
animation: slide 1s, fade 0.3s; animation-delay: 0.2s, 0.5s;
为什么设置了 animation-delay 却没延迟？常见失效原因
最常踩的坑是动画没被“触发”——animation-delay 只对已激活的动画生效，而动画激活依赖于 animation-name 和至少一个关键帧定义。如果 CSS 中漏写了 @keyframes，或名字拼错，整个 animation 属性会静默失效，延迟自然也不起作用。
- 检查浏览器开发者工具的“Computed”面板，确认
animation-name是否解析为none - 确保
@keyframes名称与animation-name完全一致（区分大小写） - 若用 JS 动态添加 class 触发动画，需注意：class 添加后 DOM 立即更新，但动画延迟从样式计算完成那一刻计时，不是从 JS 执行完那一刻
配合 animation-fill-mode 控制延迟期间的初始状态
默认情况下，动画延迟期间元素显示的是“未应用动画前”的样式（即 delay 阶段无视觉变化）。如果希望延迟阶段就呈现动画第一帧的样子，必须加 animation-fill-mode: forwards；否则即使设置了 animation-delay，用户也看不出“等待感”。
-
forwards让动画结束后保持最后一帧，同时也让延迟期显示第一帧（前提是动画本身有明确的0%关键帧） - 若同时设了
animation-direction: reverse，forwards会保留的是100%帧，而非0%，这点容易混淆 - 避免滥用
both：它会让延迟期显示0%帧、动画后保持100%帧，但若动画被 JS 中断或重置，状态可能不可控
JS 动态控制延迟时要注意重绘时机
用 JS 修改 style.animationDelay 或切换 class 来改变延迟值，不能立刻生效——必须强制触发一次样式重排（reflow），否则浏览器可能合并本次修改，导致延迟不变。
立即学习“前端免费学习笔记（深入）”；
- 简单可靠的做法：改完
animation-delay后读取一次offsetHeight或getComputedStyle(el).opacity - 更稳妥的方式是用
setTimeout(fn, 0)把动画触发逻辑放到下一轮事件循环，避开样式计算同步阶段 - 不要在同一个 tick 内连续增删 class 并期望延迟重算；CSS 动画的触发以 class 最终状态为准，中间过程会被忽略
