CSS过渡延迟transition-delay_实现多元素交错动画方案

用 transition-delay 配合 :nth-child 可实现多元素交错入场，需注意延迟值设置、css变量动态控制、失效原因及与 animation-delay 的区别。

transition-delay 配合 :nth-child 实现交错入场

多个元素用同一个 transition 时，想让它们依次动起来，核心不是靠 js 控制，而是靠 CSS 的 transition-delay 批量设不同延迟值。最直接的写法是结合 :nth-child，比如 5 个按钮，延迟分别是 0s、0.1s、0.2s……

• 别用 :nth-of-type 替代 :nth-child，除非你确定父容器里只有目标元素；混有文字节点或其他标签时，:nth-of-type 容易错位
• 延迟值建议用小数（如 0.15s），避免整数秒导致动画“卡顿感”明显
• 如果元素数量不固定（比如由 JS 动态插入），纯 CSS 方案会失效，得切到 JS + setTimeout 或 CSS 自定义属性注入

button {   opacity: 0;   transform: translateY(20px);   transition: opacity 0.3s ease, transform 0.3s ease; } button:nth-child(1) { transition-delay: 0s; } button:nth-child(2) { transition-delay: 0.1s; } button:nth-child(3) { transition-delay: 0.2s; }

用 CSS 自定义属性动态控制 delay 值

当需要响应式调整延迟节奏，或配合主题切换、动画速度偏好设置时，硬写死 :nth-child(n) 规则太僵硬。改用 --delay 自定义属性更灵活，JS 可随时更新，CSS 也能用 calc() 组合计算。

• 必须给每个元素单独设 style="--delay: 0.15s"，不能只在父级设——CSS 变量不继承，但会从父级 级联 到子元素，而 transition-delay 不接受变量级联，必须显式绑定
• transition-delay: var(--delay, 0s) 中的默认值很重要，否则未设变量的元素会直接跳过动画
• 注意 safari 对 var() 在 transition-delay 中的支持较晚（ios 15.4+ 才稳定），老版本会退化为无延迟

<div class="list">   <div style="--delay: 0s">Item 1</div>   <div style="--delay: 0.12s">Item 2</div>   <div style="--delay: 0.24s">Item 3</div> </div>  .list > div {   opacity: 0;   transition: opacity 0.4s cubic-bezier(0.17, 0.67, 0.83, 0.67);   transition-delay: var(--delay, 0s); }

transition-delay 失效的三个典型原因

写了 transition-delay 却没看到延迟效果，大概率不是语法错，而是触发条件没满足。常见于初始渲染、类名切换或 display 变化场景。

• display: none → block 切换后，transition-delay 不生效：因为元素重绘时状态被重置，得先设成 opacity: 0; visibility: hidden;，再通过 JS 或 class 切换 visibility: visible 和 opacity
• 用 classList.toggle() 切换动画类，但 class 内没定义起始态（比如没设 opacity: 0），浏览器找不到“变化起点”，延迟就丢了
• 父元素用了 will-change: transform，某些 chrome 版本下会干扰 transition-delay 解析，临时去掉测试是否恢复

和 animation-delay 混用时的优先级陷阱

一个元素同时写了 transition-delay 和 animation-delay，动画不会叠加延迟，而是按 CSS 级联规则各自生效——但视觉上容易误判谁在主导。

立即学习“前端免费学习笔记（深入）”；

• animation-delay 控制的是整个 @keyframes 动画的启动时机，transition-delay 控制的是属性变化的响应时机，二者作用域不同，但都影响“什么时候开始动”
• 如果 animation 和 transition 修改同一属性（比如都改 transform），animation 会完全接管该属性，transition 彻底失效，哪怕它先写
• 调试时用 DevTools 的 Animations 面板看实际触发时间，比肉眼数帧更可靠；注意面板里显示的 delay 值是否和代码一致，有时 computed 值会因继承或 calc 折算出意外结果

过渡延迟本身很简单，真正难的是在 dom 动态增删、服务端渲染首屏、无障碍焦点顺序这些边界场景里，保持 delay 节奏不崩。很多人卡在第 3 步——以为是写法问题，其实是元素还没挂载完成就被加了 class。