本文详解如何通过 transition-delay 调整多个元素过渡动画的触发时序，实现悬停进入与离开时的反向逐级动画效果（如“展开→收缩”顺序互逆），并给出可直接运行的代码示例与关键注意事项。
在 CSS 过渡（transition）中，transition-delay 是决定动画何时开始的关键属性。它本身不控制持续时间或缓动，而是为过渡添加一个“等待期”——即从触发条件（如 :hover 状态变化）生效到实际动画启动之间的时间间隔。要实现“悬停时从前向后展开、移出时从后向前收起”的视觉效果，核心在于：进入动画（hover on）与退出动画（hover off）共用同一组 transition 声明，因此必须通过对各元素设置递增/递减的 transition-delay 值，使它们在状态切换时自然形成反向时序链。
例如，在原始代码中，#j 的 transition: padding 500ms 3s 表示：当 :hover 激活时，它会在 3 秒后才开始执行 padding 变化；而 #t 延迟仅 0.5s，因此最先响应。这导致悬停进入时由前（#t）到后（#j）依次展开。但当鼠标移出、:hover 失效时，所有元素会同时开始恢复原始样式——此时若仍保持 #t 延迟最短、#j 延迟最长，则 #t 将最先收缩，#j 最晚，从而形成“反向收起”效果。
✅ 正确做法是：将延迟值倒序分配。让最后一个展开的元素（如 #j）拥有最小的 transition-delay，第一个展开的元素（如 #t）拥有最大的延迟。这样在 hover 离开时，#j 最先开始还原，#t 最晚，视觉上即呈现“从后往前打包”的流畅反向动画。
以下是优化后的完整代码（精简为 3 个元素便于演示，可按需扩展）：
立即学习“前端免费学习笔记（深入）”；
* {
margin: 0;
}
.main > div {
font-family: "Comfortaa";
border: none;
margin: auto;
padding: 25px;
text-align: center;
float: left;
/* 统一基础 transition：时长 500ms，延迟依序递减 */
}
#t { background-color: lightcoral; transition: padding 500ms 1.5s; }
#r { background-color: LightSalmon; transition: padding 500ms 1.0s; }
#o { background-color: PapayaWhip; transition: padding 500ms 0.5s; }
/* 悬停时统一减小底部 padding（模拟“压扁”效果）*/
.main:hover > #t { padding: 20px 20px 50px 20px; }
.main:hover > #r { padding: 20px 20px 75px 20px; }
.main:hover > #o { padding: 20px 20px 100px 20px; }<div class="main"> <div id="t">T</div> <div id="r">R</div> <div id="o">O</div> </div>
? 关键要点说明：
- ✅ transition 是双向生效的：它既作用于 :hover 激活时，也作用于 :hover 结束时。无需额外写 :not(:hover) 规则。
- ⚠️ 延迟值必须严格对应动画逻辑：若希望 N 个元素在 hover 进入时按 1→2→3→…→N 顺序展开，则退出时要按 N→N−1→…→1 收起，那么它们的 transition-delay 应设为 D×(N−i)（i 为索引，D 为单位延迟）。
- ? 兼容性良好：transition-delay 在所有现代浏览器中均被完全支持（包括 Safari 3.1+、Chrome 4+、Firefox 4+）。
- ? 进阶提示：如需更精细控制（如不同方向动画、不同缓动函数），可拆分 transition-property 并组合使用 transition-timing-function，但务必确保 transition-delay 与目标属性严格匹配。
掌握 transition-delay 的反向编排逻辑，是构建专业级交互动画的基础能力——它让 CSS 不再只是静态样式，而成为可编排、有节奏、具叙事感的视觉语言。
