如何控制 CSS 过渡动画的延迟与反向执行顺序

本文详解如何通过调整 `transition-delay` 值，实现多个元素在 hover 离开时按指定顺序（如从最后一个元素开始）逐个“收起”，达成流畅的反向过渡效果。

css 的 transition 属性支持三值简写语法：transition: 。其中 决定了过渡动画何时开始——它不仅作用于 :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 即可实现专业级交互动画。