Web Animations API是浏览器原生JavaScript接口，用于编程创建、控制CSS/SVG动画；支持animate()启动、play/pause/reverse/cancel等精细控制，以及finish/cancel事件监听，性能优于rAF且可与CSS动画协同。
Web Animations API 提供了一套 JavaScript 接口，让你能以编程方式创建、控制和管理 CSS 动画与关键帧动画，比单纯切换 class 或操作 animation-play-state 更灵活、更精准。
用 element.animate() 启动动画
这是最常用的方式，直接在元素上播放一个动画，返回一个 Animation 对象，可用于后续控制：
- 第一个参数是关键帧对象数组（或对象形式的属性映射），类似 CSS 中的
@keyframes，但用 JS 对象描述，例如：[{ opacity: 0 }, { opacity: 1 }] - 第二个参数是动画选项，如
duration（毫秒）、easing（缓动函数）、iterations（重复次数）、direction等 - 不依赖 CSS 类或
@keyframes定义，适合动态生成动画效果
示例：
const anim = box.animate([{ transform: 'scale(1)', opacity: 0.5 },
{ transform: 'scale(1.2)', opacity: 1 }],
{ duration: 300, easing: 'ease-in-out' }
);
暂停、恢复、反向和取消动画
拿到 Animation 实例后，可随时干预其播放状态：
立即学习“Java免费学习笔记（深入）”；
JavaStoryDevelop
下载
你接手一个需求时，是不是经常这样："改一个小字段 → 结果把不相关的代码也改了"、"需求说得很模糊 → 做着做着发现跑偏了"、"数据库加个字段 → 上线才发现漏了数据兼容"、"做了个新功能 → 一个月后自己都忘了当时怎么设计的"、"写到一半被中断 → 再回来不知道从哪继续"；这个 Skill 就是专门解决这些问题的。 它会自动探测你的项目环境（JDK、Spring Boot、ORM、数据库、前端框架），记在
-
anim.pause()：暂停，再次调用anim.play()会从暂停处继续 -
anim.reverse()：将当前播放方向取反（正向变反向，反向变正向），并立即生效 -
anim.cancel()：彻底终止动画，元素回到动画开始前的状态（注意：不是结束状态） -
anim.finish()：跳转到动画最后一帧，并触发finish事件
监听动画生命周期事件
通过 onfinish、oncancel 和 onremove 属性，或使用 addEventListener 监听对应事件：
-
finish：动画自然结束（完成所有 iteration）或被finish()主动触发时触发 -
cancel：调用cancel()后触发，常用于清理资源 -
remove：动画被自动移除（如元素从 DOM 删除）时触发
示例：
anim.onfinish = () => console.log('动画结束了');anim.addEventListener('cancel', () => {
// 执行清理逻辑
});
与 CSS 动画共存与协调
Web Animations API 可以和已定义的 CSS 动画共存，但需注意优先级规则：
- JS 创建的动画（
element.animate()）默认具有更高优先级，会覆盖同名 CSS 动画属性（如transform、opacity） - 可通过
anim.effect.getComputedTiming().progress获取当前动画进度（0～1） - 若想让 JS 动画“接续”一个正在运行的 CSS 动画，可用
getAnimations()获取已有动画，再基于其当前状态构造新动画
获取当前所有动画：element.getAnimations()，返回 Animation[]，方便统一管理或查找。
