JavaScript控制CSS动画：WebAnimationsAPI详解

Web Animations API 是浏览器原生提供的强大 JavaScript 接口，让你无需依赖 CSS 类切换或复杂的状态管理，就能以代码方式精准创建、实时控制（播放、暂停、反向、取消、完成跳转）并监听生命周期事件的动画，既支持动态生成关键帧、灵活配置缓动与循环，又能与现有 CSS 动画协同工作、甚至无缝接续，性能优于 requestAnimationFrame，是现代 Web 动画开发中兼顾表现力、可控性与可维护性的核心利器。

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 定义，适合动态生成动画效果

示例：

暂停、恢复、反向和取消动画

拿到 Animation 实例后，可随时干预其播放状态：

• anim.pause()：暂停，再次调用 anim.play() 会从暂停处继续
• anim.reverse()：将当前播放方向取反（正向变反向，反向变正向），并立即生效
• anim.cancel()：彻底终止动画，元素回到动画开始前的状态（注意：不是结束状态）
• anim.finish()：跳转到动画最后一帧，并触发 finish 事件

监听动画生命周期事件

通过 onfinish、oncancel 和 onremove 属性，或使用 addEventListener 监听对应事件：

• finish：动画自然结束（完成所有 iteration）或被 finish() 主动触发时触发
• cancel：调用 cancel() 后触发，常用于清理资源
• remove：动画被自动移除（如元素从 DOM 删除）时触发

示例：

与 CSS 动画共存与协调

Web Animations API 可以和已定义的 CSS 动画共存，但需注意优先级规则：

• JS 创建的动画（element.animate()）默认具有更高优先级，会覆盖同名 CSS 动画属性（如 transform、opacity）
• 可通过 anim.effect.getComputedTiming().progress 获取当前动画进度（0～1）
• 若想让 JS 动画“接续”一个正在运行的 CSS 动画，可用 getAnimations() 获取已有动画，再基于其当前状态构造新动画

获取当前所有动画：element.getAnimations()，返回 Animation[]，方便统一管理或查找。

理论要掌握，实操不能落！以上关于《JavaScript控制CSS动画：WebAnimationsAPI详解》的详细介绍，大家都掌握了吧！如果想要继续提升自己的能力，那么就来关注golang学习网公众号吧！