Web Animations API 动画

Web Animations API（WAAPI）：element.animate(keyframes,options)比CSS动画更强大、Animation对象（play/pause/reverse/finish/cancel）、时间线Timeline、与requestAnimationFrame对比 · 难度：入门 · +10XP

Web Animations API —— 用JS精确控制动画

CSS动画简单但不够灵活。Web Animations API让你用JavaScript创建、暂停、反转、组合动画——且性能不输CSS动画。

基本用法

const animation = element.animate([
  { transform: 'translateX(0)', opacity: 1 },
  { transform: 'translateX(200px)', opacity: 0 }
], {
  duration: 1000,
  easing: 'ease-in-out',
  fill: 'forwards',
  iterations: Infinity
});
animation.pause();   // 暂停
animation.play();    // 继续
animation.reverse(); // 反转
animation.finish();  // 跳到结束

动手练习

1. 基础练习：用WAAPI做一个点击后滑出再淡出的提示条。
2. 进阶应用：用animation.currentTime实现拖动控制动画进度。
3. 项目实战：把项目中用CSS animation实现但需要JS控制的动画改用WAAPI。