如何精确控制 CSS 过渡动画的延迟与反向时序

本文详解如何通过调整 `transition-delay` 值，实现多元素 css 过渡的「正向逐级展开」与「反向逆序收起」效果，确保悬停退出时最后一个元素最先开始动画，形成流畅的倒序折叠体验。

css 的 transition 属性支持四值简写语法：

transition:    ;

其中 （延迟时间）是关键——它不仅影响悬停进入（:hover）时的启动时机，更决定悬停离开（hover 状态结束）时的动画触发顺序。浏览器会为进入和退出两个方向分别应用相同的 transition-delay，因此若希望退出时“从后往前”收起（如题中要求“从最后一个立方体 #j 开始 packing up”），就必须让 #j 的 transition-delay 最小（甚至为 0），而 #t 的延迟最大。

原代码中，#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 四值语法并理解其双方向适用性，即可轻松构建富有节奏感的交互动画。