Web Animation API 浏览器原生提供的动画接口

Web Animations API（WAAPI）是浏览器原生提供的动画接口‌，它把 CSS 动画的高性能和 JavaScript 的灵活控制结合在一起，让你能用 JS 直接操作动画的播放、暂停、倒放等状态 。‌‌‌

怎么用它让元素动起来

最核心的就是 element.animate()方法，它接受关键帧数组和动画选项两个参数，返回一个可控制的 Animation 对象 。‌‌‌

const box = document.getElementById('myBox');
const keyframes = [
{ opacity: 0, transform: 'translateX(0px)' },
{ opacity: 1, transform: 'translateX(200px)' }
];
const options = {
duration: 1000,  // 持续1秒
easing: 'ease-in-out',
fill: 'forwards', // 动画结束后保持最终状态
iterations: Infinity // 无限循环
};
const animation = box.animate(keyframes, options);
// 后续可通过animation.pause()、animation.play()等控制 。

关键帧可以用对象数组定义每帧的状态，也可以用属性-值对表示从当前到目标的过渡 。‌‌‌

跟 CSS 动画比有啥优势

‌WAAPI 最大的好处是动画变成可操控的实体对象‌，CSS 动画只是声明式的样式规则，很难在运行时动态调整 。‌‌‌

• ‌精细控制‌：能随时暂停、反向播放、调整播放速率，CSS 动画只能靠切换类来实现 。
• ‌状态同步‌：可以读取当前动画进度、监听完成事件，CSS 动画需要额外用 JS 监听 DOM 变化 。
• ‌性能相当‌：WAAPI 和 CSS 动画都利用 GPU 加速合成器线程，性能基本持平，但 WAAPI 代码更简洁 。
• ‌可组合性强‌：能轻松实现交错动画、序列动画，CSS 需要嵌套多个动画或用延迟模拟 。‌‌‌

怎么用才不卡

‌优先动画 transform 和 opacity 属性‌，这两个属性不会触发布局重排，浏览器能直接用 GPU 合成处理 。‌‌‌

• 避免动画 width、height、top、left 等可能引起重排的属性 。
• 复杂动画可配合 will-change: transform提升流畅度 。
• 老浏览器可通过引入 web-animations-js polyfill 来兼容 。‌‌‌

主流浏览器如 Chrome 36+、Firefox 48+、Edge 79+ 都已原生支持，IE 浏览器不支持 。‌‌‌