Web Animations API（网页动画接口）

Web Animations API（网页动画接口，常缩写为 WAAPI）是 W3C 制定的浏览器原生动画标准，将驱动 CSS 动画（animation）与 CSS 过渡（transition）的底层时间线引擎以 JavaScript 接口的形式开放出来。开发者调用元素的 animate 方法，传入关键帧数组与时序参数，即可创建一个可编程控制的动画对象（Animation），实现播放、暂停、跳转、反向与变速等操作。

概述

在 WAAPI 出现之前，网页动画存在两条割裂的路线：CSS 动画性能好（可交由合成器线程运行，不受主线程卡顿影响），但难以用脚本动态控制；基于 requestAnimationFrame 逐帧改样式的 JavaScript 动画控制灵活，却始终占用主线程且需自行实现缓动与时间管理。WAAPI 统一了这两个世界：动画声明方式类似 CSS 关键帧，运行则由浏览器动画引擎接管，对 transform、opacity 等属性仍可走合成器加速；同时返回的 Animation 对象提供 play、pause、reverse、finish、cancel 方法，playbackRate 属性可实时变速，currentTime 可精确定位，finished 是一个 Promise 便于编排后续逻辑。通过 getAnimations 方法还能获取元素上包括 CSS 动画在内的所有动画进行统一控制。该 API 已被所有主流浏览器支持，滚动驱动动画等新特性也建立在其时间线模型之上。

核心特点

• 原生高性能：由浏览器动画引擎执行，合成器可加速的属性不受主线程阻塞影响。
• 完全可编程：播放状态、速率、进度均可随时读写，支持动态生成关键帧。
• 与 CSS 打通：能读取和控制由 CSS 声明的动画与过渡。
• Promise 集成：动画完成即兑现 finished，便于串联动画序列。
• 无需依赖库：覆盖大量原本需要动画库才能实现的需求。

应用场景

WAAPI 适合需要程序化控制的界面动画：根据手势进度实时驱动的拖拽回弹、可暂停回放的引导演示、列表项的交错入场（为每项设置递增延迟）、主题切换的过渡编排等。View Transitions API 产生的过渡动画也可通过 getAnimations 拿到并二次控制。流行动画库 Motion（原 Framer Motion 作者的 Motion One）直接构建在 WAAPI 之上以获得原生性能。

常见问题

问：有了 CSS 动画为什么还需要 WAAPI？答：CSS 动画声明后难以动态控制进度与速率，WAAPI 提供同等性能且可用脚本随时暂停、反向、变速与跳转，适合交互驱动的动画。

问：WAAPI 和 requestAnimationFrame 逐帧动画哪个好？答：多数属性动画应优先 WAAPI，浏览器会自动优化甚至脱离主线程运行；只有画布绘制或高度自定义的逐帧逻辑才需要 requestAnimationFrame。

问：WAAPI 能动画任意 CSS 属性吗？答：凡是可插值的 CSS 属性都可以，但只有 transform、opacity 等少数属性能获得合成器加速，动画 width、top 等布局属性仍会触发回流，应尽量避免。