核心是复用同一套@keyframes，仅通过animation-delay错开启动时间；静态列表用:nth-child(n)设不同延迟值，动态列表需在元素创建后、插入前用style.animationDelay配置，滚动触发应结合IntersectionObserver。
animation-delay 怎么给每个元素设不同值
核心是复用同一套 @keyframes，只靠 animation-delay 错开启动时间。别为每个元素写一套动画规则，既难维护又浪费 CSS 解析开销。
静态列表（比如固定 5 个卡片）直接用 :nth-child(n)：
.card { animation: fadeIn 0.4s ease-out forwards; }
.card:nth-child(1) { animation-delay: 0s; }
.card:nth-child(2) { animation-delay: 0.15s; }
.card:nth-child(3) { animation-delay: 0.3s; }
.card:nth-child(4) { animation-delay: 0.45s; }
.card:nth-child(5) { animation-delay: 0.6s; }- 别用
:nth-of-type，父容器里只要混一个<span>或文本节点，序号就全乱 - 延迟值建议用小数（如
0.15s），整数秒（1s）容易产生明显卡顿感 - 如果元素数量不固定（比如 JS 动态插入），纯 CSS 方案会失效，必须切到 JS 控制
动态列表怎么批量设置 animation-delay
不能先 innerHTML = '' 再 querySelectorAll + forEach —— DOM 渲染有微小延迟，部分元素可能还没挂载就被跳过；更糟的是，类名还没生效时就查，.card 根本选不到。
正确做法是「创建即配置」：在 document.createElement() 后、append() 前，直接设 style.animationDelay：
立即学习“前端免费学习笔记（深入）”；
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
for (let i = 0; i < items.length; i++) {
const el = document.createElement('div');
el.className = 'card';
el.style.animationDelay = `${i * 0.15}s`;
container.append(el);
}- 避免用
setTimeout驱动element.animate()：不同步、无法暂停、重播逻辑复杂 - 如果要随机延迟，用
Math.random() * 1.5，但注意负延迟（如-0.8s）能让循环动画（infinite）从不同相位开始，视觉更自然 - 别把 delay 写死在 HTML 的
style属性里，新增元素就得手动改，违背可维护原则
transition-delay 和 animation-delay 有什么区别
transition-delay 只对属性变化生效（比如 hover 时 opacity 变化），而 animation-delay 是控制整个 @keyframes 动画的起始偏移。两者不能混用，也不能靠 transition 实现循环动画。
用 transition-delay 做交错入场时，必须确保触发条件统一（例如所有按钮都监听 :hover 或都加 .active 类），否则延迟无效：
button {
opacity: 0;
transform: translateY(10px);
transition: opacity 0.3s, transform 0.3s;
}
button:nth-child(1) { transition-delay: 0s; }
button:nth-child(2) { transition-delay: 0.1s; }-
transition-delay不支持calc()或 CSS 变量（Safari 15.4 之前完全不支持var(--delay)） - 如果需要响应式调整节奏（比如用户偏好“慢速动画”），
animation-delay+ CSS 自定义属性更可靠 - 滚动触发类名切换时，优先用
IntersectionObserver控制.active开关，再让transition-delay或animation-delay生效，别用scroll事件直接操作样式
为什么滚动动画总是一下全出，而不是依次出现
常见原因是没把延迟逻辑和可见性判断绑定——scroll 事件里只做「加类」，但所有元素都在同一帧被加上 .active，animation-delay 就失去意义。
必须在判断元素进入视口后，按索引逐个加延时：
observer.observe(el);
// ……
const index = Array.from(container.children).indexOf(el);
setTimeout(() => {
el.classList.add('active');
}, index * 200);- 别在
scroll回调里直接写el.classList.add('active')，那会同步触发所有动画 - 用
IntersectionObserver获取真实可见时机，比getBoundingClientRect().top更精准、性能更好 - 延迟单位用毫秒（
200），别混用s和ms，JS 里setTimeout只认毫秒
实际项目里最容易被忽略的，是「动态内容」和「滚动触发」这两类场景下，延迟必须和 DOM 创建/可见性判断强耦合，而不是事后补。一招错，满盘延迟失效。
