本文详解如何通过调整 `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 个元素）：
