本文详解如何通过调整 `transition-delay` 值，实现多个元素在悬停进出时按指定顺序逐个展开/收起，尤其适用于倒序收起（如从最后一个元素开始“折叠”）的交互动画效果。
CSS 的 transition 属性支持三值简写语法：transition: 。其中 决定了过渡动画何时开始——它对进入（hover on）和离开（hover off）两种状态均生效，但关键在于：离开时的延迟仍沿用原设置，不会自动反转。因此，要实现“悬停时从前向后展开、移出时从后向前收起”，必须手动将 transition-delay 值倒序分配。
以原始代码为例：7 个元素 #t → #j 在悬停时依次增加底部 padding，且 #j 延迟最长（3s），形成“由前到后逐个拉伸”的视觉动效。若希望移出时“从 #j 开始最先收起、#t 最后收起”，则需让 #j 的 transition-delay 最小（甚至为 0），而 #t 的延迟最大——即把原延迟序列 [0s, 0.5s, 1s, 1.5s, 2s, 2.5s, 3s] 反转为 [3s, 2.5s, 2s, 1.5s, 1s, 0.5s, 0s]。
✅ 正确配置示例（完整版）：
