animation-delay 是实现 stagger 效果最轻量方式，需配合 :nth-child 或 css 变量动态设置不同延迟，不可全局统一；transition-delay 不适用复杂序列动画，且无法与 @keyframes 配合。
animation-delay 怎么给每个元素设不同延迟
直接用 animation-delay 是最轻量的方式，但必须配合循环索引或 CSS 变量动态生成，不能靠一个全局值“自动错开”。常见错误是写成 .item { animation-delay: 0.2s; } —— 所有元素都延后 0.2 秒，根本没交错。
实操建议：
- 用
:nth-child(n)手动写死延迟：比如.item:nth-child(1) { animation-delay: 0s; }、.item:nth-child(2) { animation-delay: 0.1s; }，适合项数固定且少（≤ 10）的场景 - 用 CSS 自定义属性 + JS 动态赋值：在 JS 中遍历
document.querySelectorAll('.item')，对每个元素设置style.setProperty('--delay', i * 0.1 + 's')，CSS 里写animation-delay: var(--delay); - 避免用
setTimeout控制类名切换——它和 CSS 动画时序难对齐，容易卡顿或跳帧
为什么 stagger 效果用 animation-delay 比 transition-delay 更合适
transition-delay 只在状态变化（如 hover、class 切换）瞬间起作用，且无法和 @keyframes 配合做复杂路径动画；而 animation-delay 是绑定在动画生命周期里的，能精准控制每一帧起始点。
典型误用场景：
- 想让列表项逐个淡入+上浮，却只写了
transition: opacity 0.3s, transform 0.3s;+ JS 逐个加 class → 实际所有元素同时开始过渡，无延迟差异 - 用了
@keyframes fadeUp { ... }，但忘记加animation-delay，只靠animation-duration和animation-fill-mode无法产生 stagger - 在 Flex 或 Grid 容器中依赖
order属性“排序”来触发动画顺序——order不触发重绘，不会触发 animation
用 CSS 变量实现可配置的交错间隔
硬编码 nth-child 延迟值维护成本高，改间隔就得重写一整段 CSS；用变量可以把“延迟步长”抽出来统一管理。
关键写法：
body {
--stagger-step: 0.1s;
}
.item {
animation: fadeInUp 0.4s ease-out forwards;
}
.item:nth-child(1) { animation-delay: calc(var(--stagger-step) * 0); }
.item:nth-child(2) { animation-delay: calc(var(--stagger-step) * 1); }
.item:nth-child(3) { animation-delay: calc(var(--stagger-step) * 2); }
注意点：
-
calc()里不能混用单位，比如var(--stagger-step) * 2ms会失效，必须保证变量本身带单位 - CSS 变量不支持在
@keyframes内部被读取，所以延迟逻辑只能放在选择器层级 - 如果项数动态增加（比如虚拟滚动），
:nth-child会失效，此时必须切回 JS +style.animationDelay
动画卡顿或首帧闪动的常见原因
交错动画最容易暴露渲染性能问题，尤其在低端设备或内容较多时。不是 delay 设得不对，而是触发了非合成层动画。
排查重点：
- 检查是否触发布局（layout）：比如动画中修改了
height、width、margin，会导致每帧重排，直接卡顿；应优先用transform和opacity - 确认
will-change是否滥用：对每个.item都写will-change: transform, opacity;反而增加内存压力，建议只在动画开始前 JS 设置，结束后移除 - Chrome DevTools 的
Rendering面板打开Paint flashing，看是否有意外重绘区域；如果有，说明动画属性选错了 - 移动端 Safari 对小数秒延迟（如
0.033s）解析不稳定，建议 delay 步长至少为0.05s起
交错动画真正的麻烦点不在怎么设 delay，而在于 delay 值和动画持续时间、缓动函数、设备帧率之间的隐性耦合——差 10ms 就可能让两组动画在 60fps 下错开一帧，肉眼就能察觉不齐。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
