transition-delay 控制多子元素依次动画的关键是各元素在状态变化时按设定延迟独立启动过渡；需显式为每个子元素设置递增或倒序的 delay 值，配合明确的 transition-property 和持续时间，且元素必须始终在渲染流中（不可用 display: none）。
用 transition-delay 控制多个子元素依次动画，关键不是“等一个动完再动下一个”，而是让每个元素在状态变化（如 hover、class 切换）触发时，**各自按设定延迟启动过渡**。它依赖显式声明、统一 duration 和倒序/递增的 delay 值，不靠继承，也不自动计算。
必须显式为每个子元素设 delay，不能靠父级或 nth-child 自动推算
CSS 不支持 transition-delay: 0.1s * n 这类表达式。哪怕结构规整，也得手动或借助预处理器/JS 写出每个值：
.item:nth-child(1) { transition-delay: 0s; }.item:nth-child(2) { transition-delay: 0.15s; }.item:nth-child(3) { transition-delay: 0.3s; }- ……依此类推，延迟值需递增才能形成“从前到后”展开效果
transition-delay 只对已声明的 transition-property 生效
如果只写 transition: all 0.3s 0.1s，看似简单，但容易失控——all 会把所有可变属性（包括没变的 color、outline）都卷入，浏览器可能跳过部分过渡。稳妥做法是明确指定属性：
transition-property: opacity, transform;transition-duration: 0.3s, 0.3s;-
transition-delay: 0s, 0.1s;→ opacity 立即动，transform 延迟 0.1s 启动
要实现“进入正向、退出反向”，delay 值必须倒序设置
比如 7 个元素从左到右依次拉伸，悬停退出时希望从右到左收起。那它们的 transition-delay 就不能都是递增，而要让最右边那个 delay 最小（甚至为 0），最左边最大：
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
立即学习“前端免费学习笔记（深入）”；
- 第 1 个（左）：
transition: padding 500ms 3s; - 第 2 个：
transition: padding 500ms 2.5s; - ……
- 第 7 个（右）：
transition: padding 500ms 0s;
这样鼠标移出时，第 7 个立刻开始还原，第 1 个最后才动，视觉上就是自然的“由远及近”收拢。
隐藏方式影响 transition 是否触发
如果子元素用 display: none 隐藏，transition 根本不会执行。必须让元素始终在渲染流中：
- 初始状态用
visibility: hidden; opacity: 0; pointer-events: none; - 激活时改为
visibility: visible; opacity: 1; pointer-events: auto; - 配合
transition: opacity 0.3s, visibility 0.3s（注意 visibility 本身不可过渡，但搭配 opacity 和实际布局可模拟出平滑入场）
