transition-delay 无法实现多属性串行执行，所有过渡起始时刻相同；须合并为单条 transition 声明，注意 timing-function 不可省略；负 delay 仅跳过动画前段而非改变触发时机；真需顺序执行应使用 keyframes、JS 事件或动画库。
transition-delay 不能控制多个属性的执行顺序
很多人以为给 transition-delay 设不同值，就能让 width 先变、opacity 后变——实际不是这样。CSS 的 transition 是并行触发的：只要触发状态变化（比如 hover），所有满足条件的过渡都会同时开始，只是各自延迟不同、持续时间不同，视觉上可能错开，但**起始时刻仍是同一帧**。真要“先 A 再 B”，得靠 JS 控制类名切换节奏，或拆成多个独立动画。
用单个 transition 属性统一管理多个过渡
避免写多条 transition 声明（比如分别写 transition: width 0.3s; transition: opacity 0.3s 0.2s;），后者会覆盖前者。必须合并为一条：
transition: width 0.3s ease, opacity 0.3s ease 0.2s;
注意逗号分隔，每个字段按 property duration timing-function delay 顺序写。漏掉 timing-function 会导致 delay 不生效（浏览器会把第二个数值误认为 timing-function）。
delay 值为负数时会发生什么
transition-delay: -0.1s 不是报错，而是让过渡从“当前状态的中间位置”开始——相当于跳过前 10% 动画过程。常用于衔接上一个动画结束帧，但容易导致跳变，调试困难。真实项目中建议只用非负 delay，并配合 transitionend 事件做后续动作。
立即学习“前端免费学习笔记（深入）”；
- 负 delay 不改变触发时机，只改变动画起始状态
- 多个属性设不同负 delay，仍无法实现串行效果
- Chrome DevTools 的 Animations 面板里能看到实际起始偏移，比猜更可靠
真正需要“顺序执行”时该怎么做
比如：先缩放 → 等缩放完成 → 再淡入 → 最后位移。纯 CSS 很难干净实现，推荐组合方案：
- 用
@keyframes写一个完整动画，用animation-fill-mode: forwards保持终态 - JS 监听第一个
transitionend，再添加下一个 class（注意过滤伪元素和重复触发） - 对复杂流程，直接上
anime.js或GSAP，它们天然支持时间轴和依赖链
硬用 transition-delay 拼接三段以上效果，后期维护成本高，且在 Safari 中 delay 行为偶有偏差。
