transition-delay用于错开多个css属性的动画起始时间，仅控制触发后的延迟启动，需配合transition-property和transition-duration生效，支持负值提前启动及多属性独立延迟。
transition-delay 用来错开多个属性的动画起始时间
当一个元素同时设置多个可过渡属性（比如 opacity、transform、color），但又不希望它们同步开始动画时，transition-delay 就是控制“谁先动、谁后动”的关键。它不是让整个动画暂停，而是给某个过渡效果单独加等待时间。
常见错误是以为 transition-delay 能控制“动画中间停顿”，其实它只影响**触发后的延迟启动**；一旦开始，后续过程不受它影响。
- 必须配合
transition-property和transition-duration才生效，单独写transition-delay没效果 - 可以为不同属性分别指定延迟，例如：
transition: opacity 0.3s 0.1s, transform 0.4s 0.2s - 负值允许“提前启动”——比如设为
-0.1s，表示动画在状态变更后立刻开始，并往前追溯 0.1 秒的动画帧（浏览器会从该时刻对应的状态插值）
实现菜单展开时图标旋转 + 文字淡入的分步效果
下拉菜单常需要视觉节奏：先看到箭头旋转，再看到文字缓缓浮现。这时不能靠 JS 定时器硬控，用纯 CSS 更轻量、更可靠。
关键是把两个动画拆成独立过渡规则，各自配不同的 transition-delay：
立即学习“前端免费学习笔记（深入）”；
button {
transition:
transform 0.2s ease,
opacity 0.3s ease 0.15s;
}
button.open {
transform: rotate(180deg);
opacity: 1;
}
这里 transform 立即开始（无 delay），而 opacity 等待 0.15 秒后再启动。用户点击后，箭头先转，0.15 秒后文字才渐显，节奏自然。
注意：如果 button 初始 opacity: 0，需确保它不是被 display: none 隐藏——否则即使加了 delay，元素不可见也不会触发动画。
用 transition-delay 模拟打字机效果（有限场景）
纯 CSS 实现逐字显示很难，但若字符数量固定、结构可控（比如几个 span 并列），可以用 transition-delay 给每个字符设递增延迟，配合 opacity 或 transform 实现“逐个浮现”。
适用前提：DOM 结构静态、字符数不多（一般 ≤ 10）、不要求精确到毫秒级同步。
- 每个字符包裹在独立
span中，统一类名如char - 用 CSS :nth-child() 为每个
span设置不同transition-delay - 初始状态设为
opacity: 0，激活态改为opacity: 1
.typing .char {
opacity: 0;
transition: opacity 0.25s ease;
}
.typing .char:nth-child(1) { transition-delay: 0s; }
.typing .char:nth-child(2) { transition-delay: 0.15s; }
.typing .char:nth-child(3) { transition-delay: 0.3s; }
.typing.active .char { opacity: 1; }
这种写法对动态内容不友好，也不支持换行或响应式重排；真正需要打字效果，还是推荐用 animation + @keyframes 或 JS。
transition-delay 在 hover 动画中容易被忽略的兼容性坑
多数人知道 transition-delay 支持 hover，但容易忽略两点：
- 鼠标快速进出时，delay 期间的“等待状态”仍可被中断——比如 hover 后等了 0.1s，还没开始 opacity 变化，此时移出，动画直接取消，不会回退
- 部分旧版 Safari（≤ 13.1）对多属性不同 delay 的解析不稳定，建议用单条
transition声明，避免分开写多行 - 如果元素有
will-change: transform，且transition-delay较大（> 0.5s），某些 Chrome 版本可能出现首帧卡顿，可改用animation替代
最稳妥的做法：把 delay 控制在 0.3 秒以内，避免和用户操作意图冲突；需要复杂时序，优先考虑 @keyframes。
