使用Animate.css制作多阶段动画时，需要手动控制时序。正确的做法是利用JavaScript逐一添加类名，并确保包含animate__animated基类，同时避免一次性添加多个动画类导致冲突。
在处理复杂的动画序列时，有几个关键点需要明确：Animate.css这类工具库并非“开箱即用、自动连播”的解决方案，其默认只触发一次动画。若要实现“先淡入、再上滑、最后缩放”这样的序列，必须手动控制类名添加的时机——否则所有动画会同时触发并互相覆盖，效果完全不可控。
直接使用Animate.css处理多阶段入场动画
Animate.css本质上并非“开箱即用、自动连播”的工具，它默认仅触发一次动画。要实现“先淡入、再上滑、最后缩放”的序列，必须手动控制类名添加的时机——否则所有动画会同时触发，相互覆盖，效果完全不可控。
常见的错误写法是直接将所有类名堆叠在一起，例如 。这样三个动画会同时开始，浏览器按自己的规则叠加，最终结果完全不可预料，更无法控制各阶段的延迟。
- 正确的做法是使用JavaScript控制类名逐个添加，例如通过setTimeout或Promise链来编排时序
- 每个动画类必须搭配animate__animated这个基类才能生效，若遗漏，动画将不会执行
- 注意，Animate.css v4默认使用animation-fill-mode: backwards，因此元素在动画开始前会保持初始状态。如果希望动画结束后保留最终样式，可以额外添加修饰类，或者手动补上animation-fill-mode: forwards
使用CSS自定义属性与@keyframes组合长序列
当动画逻辑强依赖状态变化时，例如加载中→成功→错误→重试，硬编码多个@keyframes并利用JS切换class，很容易失控。更稳妥的方式是将动画拆分为原子级片段，用CSS变量来驱动流程。
.sequence-trigger { --anim-step: 0; animation: sequenceRunner 1ms steps(1, end);}@keyframes sequenceRunner { 0% { --anim-step: 0; } 100% { --anim-step: 1; }}
再配合属性选择器，让不同步骤对应不同的样式：
[data-step="0"] { opacity: 0; transform: translateY(20px); }[data-step="1"] { opacity: 1; transform: translateY(0); }[data-step="2"] { transform: scale(1.05); }
这样一来，JS只需修改data-step的属性值，CSS会自动匹配对应的状态。这种方式巧妙避免了class名冲突和时序错乱问题，且后续使用transition添加平滑过渡也十分方便。
避免在复杂序列中滥用will-change
will-change并不是性能的万能药，特别是在多阶段动画中滥用反而会拖慢渲染。它的作用是告知浏览器“这个元素即将变化”，但浏览器会为此提前创建合成层——如果几十个元素都设置了will-change: transform，图层数量会急剧增加，内存占用飙升，低端设备直接卡顿。
- 仅对真正高频变化的元素（例如滚动区域内的浮动按钮）设置will-change
- 动画结束后务必清除：可以用JS在animationend事件中移除该声明，或使用transition配合transform: none回退
- 优先使用transform: translateZ(0)或transform: translate3d(0, 0, 0)来触发硬件加速，这比will-change更轻量、更可控
使用Web Animations API衔接JS控制力与CSS性能
当CSS类库无法处理动态节奏时，例如需要根据API响应时间调整动画时长，就需要切换到JS层。但不必手写requestAnimationFrame，直接使用Element.animate()即可。它复用CSS动画引擎，性能不亚于纯CSS，还能实时读写当前播放进度。
举个例子，根据后端返回的 duration 字段动态生成动画：
element.animate([ { opacity: 0, transform: 'scale(0.8)' }, { opacity: 1, transform: 'scale(1)' }], { duration: response.duration || 300, easing: 'cubic-bezier(0.25, 0.46, 0.45, 0.94)', fill: 'forwards'});
有几个关键点值得注意：
- fill: 'forwards'确保动画停在终点，否则元素会回退到初始状态
- 传入的keyframe数组必须是纯对象，不能包含CSS单位以外的计算，例如calc()
- 如果需要暂停或恢复，使用animation.pause()和animation.play()，比class切换更精确
实际上，真正麻烦的不是写几段动画，而是让它们在不同设备、不同网络条件下都保持可预期的节奏和终止状态。很多人卡在“看起来动了”这一步，却没有验证动画是否真的在60fps下稳定运行，也没有考虑降级方案——例如Safari对animation-composition的支持很弱，某些组合动画会直接失效。这些细节不测试到真机，仅看Chrome DevTools的FPS曲线是没用的。
