CSS transition 不支持真正串行执行，所有过渡从同一帧开始，仅靠 transition-delay 错开起始时间；要实现“A 完再 B”，须改用 @keyframes animation 或 JS 监听 transitionend 事件。
CSS 的 transition 本身不支持“串行执行”——所有声明的过渡都从同一帧开始，只是靠 transition-delay 错开起始视觉节奏。真要实现「A 完了再 B」，必须跳出纯 CSS transition 思路。
transition-delay 只能错峰，不能串行
很多人写 transition: width 0.3s, opacity 0.3s 0.2s;，以为 opacity 会等 width 动完才启动。实际是：两者都在 hover 触发的**同一帧**开始，opacity 只是“晚 0.2s 才动”，而 width 已经走了 0.2s —— 它们重叠执行，并非先后。
- 这是浏览器渲染机制决定的，无法通过调整
delay或duration改变 -
transition-delay: -0.1s会让动画从中间状态切入，不是“提前触发”，而是跳过前段，容易造成跳变 - 用
@keyframes+animation才能真正控制帧级顺序，transition没有关键帧概念
多属性过渡必须合并为单条声明
写多条 transition 规则（比如分别写 transition: width 0.3s; 和 transition: opacity 0.3s 0.2s;）会导致后者完全覆盖前者——width 过渡直接消失。
- 正确写法是逗号分隔：
transition: width 0.3s ease, opacity 0.3s ease 0.2s; - 每个字段必须按
property duration timing-function delay顺序写；漏掉timing-function时，浏览器会把第二个数值（比如0.2s）误认为缓动函数，导致delay失效 - 不要混用
all和具体属性，例如transition: all 0.3s, transform 0.4s;—— 解析行为在不同浏览器中不一致
想严格串行？换 animation 或 JS 控制
当交互逻辑要求「先缩放、再位移、最后淡出」这类明确先后关系时，transition 不是合适工具。
立即学习“前端免费学习笔记（深入）”；
- 用
@keyframes写完整动画流程，配合animation-fill-mode: forwards保持终态 - 用 JS 监听
transitionend事件，在第一个过渡结束后再添加下一个 class：el.addEventListener('transitionend', () => el.classList.add('step-2')) - 对列表项逐个延迟（如
:nth-child(1) { transition-delay: 0s; }）属于“错峰播放”，不是串行，但视觉上接近，适合悬停展开类场景
最容易被忽略的一点：transition 的“延迟”对进入（hover on）和离开（hover off）都生效，且值不会自动反转。如果希望悬停时从前到后展开、移出时从后到前收起，得手动把 transition-delay 值倒序设置——这不是语法特性，是靠人算出来的。
