本文详解如何通过调整 `transition-delay` 值，实现多个元素在悬停进出时按指定顺序逐个展开/收起，尤其适用于倒序收起（如从最后一个元素开始“折叠”）的交互动画效果。
CSS 的 transition 属性支持三值简写语法：transition:
以原始代码为例：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]。
✅ 正确配置示例（完整版）：
/* 所有元素统一基础样式 */
.main > div {
font-family: "Comfortaa";
margin: auto;
padding: 25px;
text-align: center;
float: left;
}
/* 悬停时统一减小上/左/右 padding，增大下 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; }
.main:hover > #c { padding: 20px 20px 125px 20px; }
.main:hover > #h { padding: 20px 20px 150px 20px; }
.main:hover > #e { padding: 20px 20px 175px 20px; }
.main:hover > #j { padding: 20px 20px 200px 20px; }
/* 关键：transition-delay 倒序设置，使退出动画反向触发 */
#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 是相对时间偏移，不改变动画持续时间（duration），仅决定启动时机；
- 若某元素未声明 transition，则无过渡效果；务必为每个目标元素显式设置；
- 避免在 :hover 伪类中重复定义 transition（它应始终写在常态规则里），否则可能被覆盖或失效；
- 实际项目中建议使用 CSS 自定义属性（--delay）配合 calc() 或预处理器变量提升可维护性。
总结：CSS 过渡本身不具备“自动反向延迟”能力，所谓“反向收起”本质是人为设计延迟梯度的镜像映射。掌握 transition 三值语法与状态触发逻辑，即可精准编排多元素协同动画节奏，打造专业级交互体验。
