最可靠方式是用 animation-delay 配合 animation-fill-mode: backwards；transition-delay 不适用于自动触发的初始动效，因其仅在状态变化时生效，而页面加载时未触发，导致元素“卡住”。
直接用 animation-delay 配合 animation-fill-mode: backwards 是最可靠的方式，别试图靠 transition-delay 搞入场动画——它压根不适用于自动触发的初始动效。
为什么必须用 animation-delay 而不是 transition-delay
列表项一加载就该动起来，不是等 hover 或 class 切换才开始。而 transition-delay 只在状态变化时倒计时，页面渲染完成那一刻它还没被触发，所有元素就“卡住”不动了。animation-delay 是绑定在动画生命周期里的，DOM 就绪即启动，天然适配初始化场景。
- 常见误用：
.item { transition: opacity 0.4s; }+ JS 插入后加active类 → 实际所有项同时开始过渡，毫无交错 -
transition-delay无法和@keyframes配合控制起始帧；animation-delay可以精准对齐每一帧起点 - 如果混用两者（比如给同一元素设
animation和transition），animation-fill-mode: forwards和transition的终态可能冲突，导致跳帧或回弹
:nth-child(n) 手写延迟值怎么写才不翻车
适合项数固定、结构干净的场景（如导航菜单、静态卡片网格）。关键不是“能不能写”，而是“怎么写才稳”：
- 父容器里只能有目标元素 —— 混一个注释、空
<div>或文本节点，:nth-child(3)就会套到第 5 个子节点上，延迟全错位 - 别用
:nth-of-type替代 —— 它只看标签类型，JS 动态插入新<div>后，序号立刻偏移 - 延迟值建议用小数，比如
0.15s、0.25s，避免0.2s这种整百毫秒带来的机械感 - 示例（4 项）：
.item { animation: fadeInUp 0.4s ease-in forwards; }<br>.item:nth-child(1) { animation-delay: 0s; }<br>.item:nth-child(2) { animation-delay: 0.15s; }<br>.item:nth-child(3) { animation-delay: 0.3s; }<br>.item:nth-child(4) { animation-delay: 0.45s; }
动态列表怎么办：CSS 变量 + calc() 是唯一可维护解法
JS 渲染的列表、React/Vue 组件循环生成的项，硬写 :nth-child 行不通。此时必须把索引“带进来”：
立即学习“前端免费学习笔记（深入）”；
- 推荐做法：JS 遍历
document.querySelectorAll('.item')，对每个元素设置style.setProperty('--delay', i * 0.15 + 's')，CSS 里写animation-delay: var(--delay); - 纯 CSS 替代方案（需现代浏览器支持）：
.item:nth-child(n) { --index: calc(n - 1); }，再用animation-delay: calc(var(--index) * 0.15s);—— 但注意calc()里不能用n直接运算，必须先转成变量 - 千万别用
setTimeout控制类名切换：JS 时序难对齐 CSS 渲染帧，容易卡顿或首帧丢失 - 起始状态必须显式定义：
opacity: 0; transform: translateY(20px); visibility: hidden;，否则动画前元素会“闪一下”
容易被忽略的三个细节
哪怕 delay 设置对了，这三个点漏掉一个，阶梯感就塌一半：
-
animation-fill-mode: backwards必须加 —— 它让动画开始前就应用@keyframes from状态（比如opacity: 0），否则列表项在动画启动前就直接显示出来 - 容器要加
overflow: hidden—— 否则当第一项还在上滑途中，第二项已部分进入视口，“堆叠感”破坏交错节奏 -
transform和opacity必须一起动画 —— 单独opacity在 Safari 会闪边；单靠transform不隐藏内容，可能挡住下方交互区域
