本文详解如何通过调整 `transition-delay` 值，实现多个元素在 hover 离开时按指定顺序（如从最后一个元素开始）逐个“收起”，达成流畅的反向过渡效果。
CSS 的 transition 属性支持三值简写语法：transition: <property> <duration> <delay>。其中 <delay> 决定了过渡动画何时开始——它不仅作用于 :hover 进入时，更关键的是：也完全控制 :hover 结束（即鼠标移出）时的触发时机。这意味着，若想让元素在鼠标移出时“从后往前”依次收缩，只需将延迟时间倒序分配：最后一个元素延迟最短（甚至为 0），第一个元素延迟最长。
以原代码为例，7 个方块 #t 到 #j 在 hover 进入时是从前到后依次展开（#t 延迟 0s，#j 延迟 3s）。要实现反向收起，逻辑恰好相反：当 hover 状态结束，所有元素会同时恢复默认样式，但因各自 transition-delay 不同，它们的过渡动画将按延迟由小到大错峰启动。因此，我们应将 #j 的延迟设为 0s，#e 设为 0.5s，依此类推，直到 #t 设为 3s。
✅ 正确的反向延迟配置如下（精简示意，含全部 7 个元素）：
#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; }⚠️ 注意事项：
立即学习“前端免费学习笔记（深入）”；
- transition-delay 是相对 hover 状态变化时刻的偏移量，无论进入还是离开，都以此为基准；
- 所有元素必须声明相同的 transition-property（如 padding）和 transition-duration（如 500ms），否则节奏会混乱；
- 避免使用 transition: all，它可能意外触发动画其他属性，影响可预测性；
- 若需更复杂序列控制（如循环、暂停），建议改用 CSS @keyframes + animation 或 JavaScript 驱动。
总结：CSS 过渡的“反向播放”并非真正倒放动画，而是通过精心编排各元素的 transition-delay，在状态切换瞬间制造出错落有序的视觉序列。掌握这一技巧，无需 JS 即可实现专业级交互动画。
