animation-delay实现交错入场有三类方案：静态结构用:nth-child(n)最轻量；新浏览器可用sibling-index()自动计算序号；动态插入元素须在append前通过JS设置style.animationDelay。
animation-delay 是实现多个子元素交错入场最直接的手段，但“精确控制”不等于硬编码每个值——它取决于结构是否静态、浏览器支持度、以及你是否愿意引入 JS。
用 :nth-child(n) 处理固定数量的静态列表
当 DOM 结构在 HTML 中写死（比如 6 张卡片、8 个菜单项），:nth-child(n) 是最轻量、最可预测的方式。
- 必须用
:nth-child，不是:nth-of-type—— 后者会跳过文本节点或非目标标签，序号错位 - 延迟值建议用小数秒（如
0.12s），避免整数秒（如1s）导致肉眼可见的停顿感 - 别给每个元素单独写一套
@keyframes，复用同一动画规则，只改animation-delay - 示例：
.item { animation: fadeIn 0.4s ease-out forwards; } .item:nth-child(1) { animation-delay: 0s; } .item:nth-child(2) { animation-delay: 0.12s; } .item:nth-child(3) { animation-delay: 0.24s; }
用 sibling-index() 替代手写 nth 规则（Chrome/Safari 稳定版已支持）
2026 年起，sibling-index() 已进入主流稳定支持阶段。它自动计算元素在其兄弟节点中的位置（从 1 开始），无需预设数量，也不怕中间插入其他节点。
- 语法简洁：
animation-delay: calc((sibling-index() - 1) * 0.15s); - 搭配
@starting-style可省去 JS 初始化隐藏状态：.item { animation: fadeIn 0.4s ease-out forwards; animation-delay: calc((sibling-index() - 1) * 0.15s); @starting-style { opacity: 0; transform: translateY(10px); } } - 注意：Firefox 和旧版 Edge 尚未支持，需加回退（比如降级为
:nth-child或 JS 注入）
动态插入元素时，必须在 append 前设置 style.animationDelay
JS 创建的元素（如 API 返回后 forEach 渲染），纯 CSS 无法获知“第几个”，:nth-child 也来不及匹配——因为元素还没进 DOM。
立即学习“前端免费学习笔记（深入）”；
- 错误做法：先
container.innerHTML = htmlString，再querySelectorAll('.item').forEach(...)—— 部分元素可能尚未完成样式计算，animation-delay不生效 - 正确做法：创建即配置，在
append()之前赋值：items.forEach((item, i) => { const el = document.createElement('div'); el.className = 'item'; el.style.animationDelay = `${i * 0.15}s`; container.append(el); }); - 不要用
setTimeout或requestAnimationFrame延迟赋值——除非你明确需要等 layout 完成后再触发（极少数场景），否则徒增不确定性
滚动触发入场时，优先用 IntersectionObserver + class 切换
如果交错入场要配合滚动出现（比如“滑到才动”），别用 scroll 事件监听 + 手动加 delay——低端 Android 上容易掉帧。
- 核心思路：用
IntersectionObserver监听进入视口，仅添加一个类（如.is-inview），让 CSS 控制后续动画逻辑 - 延迟仍由
:nth-child或sibling-index()计算，但只对已进入视口的元素生效 - 务必在
@media (prefers-reduced-motion: reduce)中重置动画属性，否则残余transform可能导致内容错位 - 总交错延迟建议 ≤ 600ms，超过人眼易感知卡顿
真正难的不是怎么写 delay，而是判断该用哪条路径：静态结构就别碰 JS；新浏览器可用 sibling-index() 就别手写 20 行 :nth-child；动态渲染时，delay 必须在元素挂载前落进 style，晚一帧都可能白忙活。
