JavaScript 是唯一可靠桥梁——监听点击增删 class 触发动画，用累计时长计算 animation-delay，监听 animationend 实现条件分支，清理残留动画，兜底设置终态样式，用 IntersectionObserver 优化滚动触发，以 document.timeline.currentTime 对齐精确节奏。
按钮点击必须靠 JavaScript 切换 class，CSS 本身不响应 click
HTML 和 CSS 都没有原生的 :click 伪类。想让按钮点击触发动画序列，JavaScript 是唯一可靠桥梁——它监听点击，然后增删 class，由 CSS 负责定义这个 class 对应的动画行为。硬写 el.style.animation = 'xxx' 会破坏可维护性，且无法暂停、重播或精确控制序列节奏。
用 animation-delay 编排多元素序列时，延迟值必须累加而非等距
常见错误是给第 n 个元素设 animation-delay: n * 0.3s，但前提是所有动画时长都严格等于 0.3s。一旦某步动画是 0.4s、下一个是 0.25s，静态乘法就会错位。
- 正确做法：延迟值 = 前序所有
animation-duration之和（例如第一项 0s，第二项 0.4s，第三项 0.4s + 0.25s = 0.65s） - 可用
data-index+ CSS attribute selector 批量控制：[data-index="2"] { animation-delay: 0.65s; } - 若序列长度动态生成（如 JS 渲染列表），务必用 JS 计算累计时长后设置
el.style.animationDelay，别依赖固定 nth-child 规则
监听 animationend 事件才能实现条件分支或用户等待
纯 CSS 的 animation-delay 是静态的，没法等用户点击“下一步”、或等某个 API 返回后再继续。这时候必须用 JS 监听 animationend：
- 事件只在动画自然结束时触发；手动移除 class 或中断动画不会触发
- 务必检查
event.animationName === 'your-animation-name'，避免伪元素或 transition 干扰 - 首次触发建议包一层
requestAnimationFrame，避开 DOM 渲染队列导致的首帧跳过 - 重复触发前，先调用
el.getAnimations().forEach(a => a.cancel())清理残留动画状态
移动端和旧 WebView 中 animate() 的 fill 行为不可靠
如果用 Web Animations API（el.animate()）做序列，动画结束后元素样式可能回跳——尤其在部分安卓 WebView 里。animation-fill-mode: forwards 不总生效。
立即学习“前端免费学习笔记（深入）”；
- 兜底方案：动画结束时显式设置终态样式，例如
el.style.transform = 'translateY(0) scale(1)' - 避免依赖
el.animate().finished.then(...)后直接操作 DOM，优先用onfinish回调并加 try/catch - 滚动触发场景下，优先用
IntersectionObserver替代 scroll 事件监听，减少卡顿风险
真正容易被忽略的是：动画序列的“起点”不是按钮点击那一刻，而是第一个元素开始渲染帧的那一刻。DOM 插入、class 添加、浏览器重排重绘都有微小延迟，复杂序列里这点误差会逐级放大。所以涉及精确节奏（比如音画同步）时，别只靠 setTimeout 或静态 delay，得用 document.timeline.currentTime 对齐时间轴。
