本文详解如何通过调整 `transition-delay` 值，实现多元素 css 过渡的「正向逐级展开」与「反向逆序收起」效果，确保悬停退出时最后一个元素最先开始动画，形成流畅的倒序折叠体验。
CSS 的 transition 属性支持四值简写语法：
transition:;
其中
原代码中，#t 延迟 0s、#r 延迟 0.5s … #j 延迟 3s，导致进入时从左到右依次展开，但退出时也按同样延迟顺序收起（即 #t 先收、#j 最后收），不符合需求。
✅ 正确做法是反转延迟值：让视觉上“最后出现”的元素拥有最短延迟，从而在 :hover 结束瞬间最先响应过渡：
立即学习“前端免费学习笔记（深入）”；
#t { background-color: lightcoral; transition: padding 500ms 3s; }
#r { background-color: LightSalmon; transition: padding 500ms 2.5s; }
#o { background-color: PapayaWhip; transition: padding 500ms 2s; }
#c { background-color: PaleGreen; transition: padding 500ms 1.5s; }
#h { background-color: LightCyan; transition: padding 500ms 1s; }
#e { background-color: LightSkyBlue; transition: padding 500ms 0.5s; }
#j { background-color: MediumPurple; transition: padding 500ms 0s; }这样，当鼠标移出 .main 时：
- #j 立即（0s 后）开始收缩动画；
- #e 在 0.5s 后启动；
- ……
- #t 最晚（3s 后）才开始收缩，形成自然的“由远及近、由后至前”的收拢动效。
⚠️ 注意事项：
- transition-delay 是相对状态切换时刻的偏移量，与 :hover 是否存在无关，因此无需为 :hover 规则单独设置延迟；
- 所有元素必须声明相同的 transition-property（此处为 padding）和 transition-duration（500ms），否则时序将错乱；
- 若需更精细控制（如不同缓动函数），可添加 transition-timing-function，例如 transition: padding 500ms ease-out 1.5s；
- 实际项目中建议使用 CSS 自定义属性（CSS Variables）统一管理延迟序列，提升可维护性。
总结：CSS 过渡的“反向时序”本质是延迟值的镜像设计。掌握 transition 四值语法并理解其双方向适用性，即可轻松构建富有节奏感的交互动画。
