最直接方法是复用同一CSS动画，通过animation-delay错开启动时间；静态序列用nth-child配合具体延迟值，动态列表用JS批量设置style.animationDelay；需滚动触发时优先用IntersectionObserver控制类名开关。
用 CSS animation-delay 控制元素逐个触发动画最直接
多个元素按顺序依次播放同一动画，核心不是写多个 keyframes，而是复用同一套动画规则，靠每个元素的 animation-delay 错开启动时间。比如 5 个 .item 元素，想让它们每隔 0.2s 触发一次淡入+上浮，就给第 n 个元素设 animation-delay: calc(n * 0.2s)（实际需用具体数值或 JS 动态赋值）。
常见错误是试图用 JavaScript 逐个调用 element.animate() 并加 setTimeout，结果动画不同步、难以暂停/重播；或者把 delay 写死在 HTML 里，导致新增元素要手动改样式。
- 推荐用 CSS 自定义属性 +
nth-child实现静态序列：例如.list .item:nth-child(1) { animation-delay: 0s; }、.list .item:nth-child(2) { animation-delay: 0.2s; } - 若元素数量不固定（如由 JS 渲染），用 JS 批量设置
style.animationDelay更可靠，避免 CSS 选择器爆炸 - 注意：delay 值为负数时，动画会从中间某一帧开始播放，不是“提前启动”，这点常被误用
JS 中用 animate() API 实现可交互的序列动画
当需要暂停、反向播放、动态调整间隔或响应用户操作时，CSS animation-delay 就不够用了，得用 Web Animations API 的 element.animate() 配合 Promise 链或 for...of 循环控制时序。
关键点在于：不能直接在循环里写 await new Promise(r => setTimeout(r, 200))——这会阻塞主线程且无法和动画帧对齐；应使用 el.getAnimations().forEach(a => a.cancel()) 管理状态，并用 el.animate(...).onfinish 或 el.animate(...).finished.then(...) 串联动画。
- 每个
animate()调用返回一个Animation对象，它的startTime可设为document.timeline.currentTime + offset，比 setTimeout 更精准 - 若元素有不同动画效果（如第一个缩放、第二个旋转），不要硬塞进同一个 keyframes，应分别定义并按需调用
animate() - 移动端要注意：部分安卓 WebView 对
animate()的fill行为支持不稳定，动画结束后元素样式可能回跳，建议显式设style.transform作兜底
用 scroll-trigger 实现滚动驱动的序列入场
真正实用的“序列动画”往往不是自动播放，而是随用户滚动逐步触发。这时候别手写 scroll 事件监听计算位置，直接用 IntersectionObserver 监听每个元素进入视口的时机，再触发对应动画。
容易踩的坑是：所有元素共用一个 observer 却没做防抖，快速滚动时频繁触发导致动画卡顿；或者没处理元素重复进入（如来回滚动），造成动画反复播放。
- 每个元素绑定一次
observer.observe(el)即可，observer 实例可复用，无需为每个元素新建 - 首次进入后调用
observer.unobserve(el)，避免重复触发；若需二次触发（如回到顶部再滚下），改用threshold: [0.1]并在回调里检查entry.isIntersecting - 动画本身仍建议用 CSS 实现（加
.animate-in类），JS 只负责开关类名，这样性能更好、兼容性更稳
为什么不用 transition 做序列？
transition 本质是状态变化的补间，不是时间轴上的播放器。它无法独立控制多个元素的启动偏移，也不能定义循环、方向、填充模式等高级行为。强行用 transition-delay 模拟序列，会受限于“必须有状态变更才能触发”，比如你得先加 class 再改 style，逻辑绕且难调试。
典型失败场景：给一组元素设 transition-delay: calc(n * 0.1s)，但忘了它们初始状态没有 opacity: 0 或 transform: translateY(20px)，结果页面一加载就直接显示，delay 完全无效。
- transition 适合按钮 hover、菜单展开这类简单交互反馈，不适合“列表逐项飞入”这种明确的时间编排需求
- 如果项目必须兼容 IE11，那只能退回到
setTimeout+classList.add的组合，但务必加上clearTimeout防止内存泄漏 - 现代项目优先选 CSS
@keyframes+animation-delay，它零 JS、易维护、GPU 加速稳定
序列动画最难的从来不是“怎么让它动起来”，而是“怎么让它该停的时候停、该重来的时候干净重来、滚动时别抢帧、低配设备上不掉帧”。这些细节藏在 delay 的符号、observer 的 threshold、animation 的 fill-mode 里，而不是炫酷的贝塞尔曲线上。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
