animation-delay用于设置动画开始前的等待时间，支持s、ms单位及负值；负值使动画从中间帧切入；多动画需逗号对应；hover中需重置动画才生效；不可与transition-delay混用。
animation-delay 的基本用法和取值规则
animation-delay 用来指定动画在触发后、真正开始播放前的等待时间。它只影响动画的起始时机，不影响动画时长或重复行为。
支持的值类型包括：s（秒）、ms（毫秒），也支持负值——负值会让动画从中间某一帧开始播放（相当于“倒带”切入）。
- 正数如
animation-delay: 2s：等待 2 秒后从头开始 - 负数如
animation-delay: -1s：立即开始，但跳过前 1 秒的内容，直接显示第 1 秒对应的状态 - 0 或省略：动画触发即执行，无延迟
多个动画同时设置不同 delay 的写法
当一个元素应用了多个 animation（比如通过逗号分隔），animation-delay 也必须用逗号分隔，一一对应。顺序错位会导致意料外的行为。
例如：
立即学习“前端免费学习笔记（深入）”；
div {
animation: slide 2s, fade 1.5s;
animation-delay: 0.5s, 1s;
}
表示 slide 动画延迟 0.5 秒开始，fade 延迟 1 秒开始。如果只写一个 animation-delay: 0.5s，第二个动画将使用默认的 0s，而非继承前面的值。
animation-delay 在 hover 触发时的常见陷阱
很多人以为给 :hover 设置 animation-delay 就能实现“悬停后等一会儿再动”，但实际容易失效，原因有二：
-
animation-delay只在动画首次启动时生效；如果元素已处于动画中，再次 hover 不会重置 delay - 未显式声明
animation-play-state或未配合animation-fill-mode，可能导致离开 hover 后状态回退，再进入时动画不重新触发
稳妥做法是：hover 时重置动画，例如用 animation: none; animation: slide 0.8s forwards; animation-delay: 0.3s;，或者借助 keyframes 配合 animation-play-state: paused/running 控制。
delay 和 transition-delay 混用时的注意事项
animation-delay 和 transition-delay 是两套独立机制，不能互相替代。前者控制 @keyframes 动画，后者控制属性值渐变过渡。
典型误用场景：
- 想让背景色渐变延迟 0.5 秒，却写了
animation-delay: 0.5s—— 正确应为transition-delay: 0.5s - 同时设置了
transition和animation，但没意识到两者 delay 互不影响，可能造成视觉节奏错乱 - 在 CSS 预处理器中变量复用时，把
$delay同时用于 transition 和 animation，结果语义混淆
延迟逻辑看似简单，但真正在复杂交互中对齐多个动画起点、处理 hover 中断、避免与 transition 冲突，需要逐层确认触发条件和重置策略。别只盯着数值，先理清「谁在什么时候被谁触发」。
