纯 CSS 无法自动递增 animation-delay，可用 :nth-child() 手动设置或自定义属性 + calc()（如 .item { animation-delay: calc(var(--i, 0) * 0.15s); }），再通过 JS 动态注入 --i 值；需注意 Safari 兼容性及 DOM 渲染时机，推荐 requestAnimationFrame 延迟设置，并确保 key 稳定以避免交错重置。
animation-delay 怎么给每个元素设不同值
关键不是写死数字，而是用 CSS 自增或 JS 动态注入。纯 CSS 场景下，animation-delay 必须逐个元素写，没法自动递增；但可以用 :nth-child() 配合计算式（现代浏览器支持）。
- 写法示例：
.item:nth-child(1) { animation-delay: 0s; }、.item:nth-child(2) { animation-delay: 0.2s; }……手动列到第 10 个就容易漏或错位 - 更稳的写法是用 CSS 自定义属性 +
calc()：.item { animation-delay: calc(var(--i, 0) * 0.15s); }，再配合 JS 给每个元素设style="--i: 0"、style="--i: 1"…… - 注意：Safari 对
calc()在animation-delay中的支持较晚（iOS 16.4+ 才稳定），旧版本会直接忽略整条声明
JS 动态加 delay 时常见的 DOM 时机错误
动画没交错，大概率是 JS 拿到元素后立刻设了 delay，但此时元素还没渲染或还没挂载进文档流——CSS 动画不会重触发。
- 别在
for循环里直接设el.style.animationDelay = i * 0.2 + 's'，尤其在 Vue/React 的mounted或useEffect里，可能 DOM 还没完成首次绘制 - 稳妥做法是等一帧：
requestAnimationFrame(() => { el.style.animationDelay = ... }) - 如果元素是懒加载或异步插入的（比如列表滚动加载），必须监听真实插入节点事件，而不是依赖初始查询结果
交错动画卡顿？检查 animation-timing-function 和硬件加速
多个元素同时播 transform 动画本身不卡，但一旦混入 opacity 或 left/top，或者 timing function 太复杂，就容易掉帧。
- 只对
transform和opacity做动画，其他属性（如height、margin）会触发布局重排，交错越多越卡 -
animation-timing-function: cubic-bezier(.25,.46,.45,.94)比ease-in-out更可控，但别手写一堆高阶贝塞尔——浏览器解析成本会上升 - 强制硬件加速：给动画元素加
transform: translateZ(0)或will-change: transform，但别滥用，will-change开太多反而吃内存
Vue/React 里 key 变化导致交错重置怎么办
列表重新渲染时，如果 key 值变了，浏览器会把旧元素当全新节点处理，delay 从头开始算，交错感就没了。
立即学习“前端免费学习笔记（深入）”；
- 确保
key是稳定标识（比如 id），而不是索引:key="index"—— 排序或过滤后索引变，所有 delay 都乱 - 如果必须用索引做 key（比如临时 demo），加个
key={item.id + '-anim'}之类后缀，让动画层和数据层 key 分离 - React 中可考虑用
useId()+ ref 缓存 delay 值，避免每次渲染重算
真正难的不是设 delay，是保证 delay 值在元素生命周期里不变、不被覆盖、不因框架重渲染而重置——尤其是带搜索、排序、分页的列表，交错很容易悄悄失效。
