CSS动画卡顿主因是触发布局重排，应优先使用transform和opacity；避免top/left/width/height等属性；慎用will-change；禁在动画中读写布局信息；控制关键帧数量并优化缓动函数。
直接用 animation-delay 配合 :nth-child() 或 CSS 自定义属性就能实现，不需要 JS 控制入场顺序——但延迟值设错、DOM 渲染时机不对、或混用 :nth-of-type，动画就会全卡在第一帧不动。
为什么 animation-delay 设了却没效果？
常见原因是选择器没匹配到目标元素，或者延迟值被浏览器忽略。比如父容器里有文字节点、注释或其它标签，:nth-child(2) 实际可能选中的是一个 <span> 而不是你要的 <div>。
- 优先用
:nth-child(n)，它按 DOM 顺序数，不挑标签类型 - 别用
:nth-of-type(n)，除非你确认父元素下只有同类型子元素 - 延迟值写成小数（如
0.15s），整数秒（如1s）容易因渲染帧率导致“跳帧”感 - 检查浏览器控制台是否报
Invalid property value—— Safari 在 iOS 16.4 之前不支持calc(var(--i) * 0.15s)用在animation-delay上
transition-delay 和 animation-delay 能混用吗？
不能直接混用在同一套动效逻辑里。两者触发机制不同：transition-delay 等待状态变化（比如 hover、class 切换）后才开始计时；animation-delay 是动画声明的一部分，页面加载即开始倒计时。
- 做「一进一出」的交错入场（比如列表逐个淡入），用
animation-delay+@keyframes - 做「悬停联动」（比如鼠标移上链接，背景和文字一起动），用
transition-delay+:hover更可控 - 同一个元素上同时写两种 delay，后者不会覆盖前者，但行为不可预测，建议只选一种
动态插入的元素怎么加交错延迟？
纯 CSS 拿不到“第几个插入”的序号，JS 必须介入，但不能一查到元素就立刻设 style.animationDelay。
立即学习“前端免费学习笔记（深入）”；
- 用
requestAnimationFrame延迟赋值，确保元素已渲染：els.forEach((el, i) => { requestAnimationFrame(() => { el.style.animationDelay = (i * 0.15) + 's'; }); }); - 如果是懒加载或滚动加载的列表，监听
MutationObserver或使用IntersectionObserver触发，而不是依赖初始document.querySelectorAll - React/Vue 中，在
useEffect或mounted里设 delay 前，先加个setTimeout或nextTick，避免 DOM 尚未挂载完成
真正容易被忽略的点是：交错动画卡顿往往不是因为 delay 设置问题，而是动了 left、top、height 这类触发布局重排的属性。只要保持只对 transform 和 opacity 动画，哪怕 50 个元素交错播放，也不会掉帧。
