概念和用法
Web 动画 API 为浏览器和开发人员提供了一种用于描述 DOM 元素的动画的通用语言。要获得有关 API 背后的概念以及如何使用它的更多信息，请阅读使用 Web 动画 API。
Web 动画接口
Animation
提供播放控制、动画节点或源的时间轴。可以接受使用 KeyframeEffect() 构造函数创建的对象作为参数。
KeyframeEffect
描述动画属性的集合及其值，称为关键帧及其时间选项。然后可以使用 Animation() 构造函数进行播放。
AnimationTimeline
表示动画的时间轴。此接口用于定义时间轴特性（继承自 DocumentTimeline 和未来的时间轴对象），并且本身不被开发人员访问。
AnimationEvent
CSS 动画模块的一部分，捕获动画名称和已用时间。
DocumentTimeline
表示动画时间轴，包括默认的文档时间轴（通过 Document.timeline 属性访问）。
对其他接口的扩展
Web 动画 API 向 document 和 element 添加了一些特性。
对 Document 接口的扩展
document.timeline
表示默认文档时间轴的 DocumentTimeline 对象。
document.getAnimations()
返回一个数组，其中包含当前在 document 元素上生效的 Animation 对象。
对 Element 接口的扩展
Element.animate()
用于在元素上创建和播放动画的快捷方式。它返回创建的 Animation 对象实例。
Element.getAnimations()
返回一个包含当前影响元素或计划在未来影响元素的 Animation 对象的数组。
规范
规范
Web Animations
参见
CSS animation 简写属性
CSS animation-timeline 属性
使用 Web 动画 API
使用 CSS 动画
CSS 动画模块
CSS 滚动驱动动画模块
帮助改进 MDN
此页面对您有帮助吗？
是
否
了解如何参与贡献
此页面最后更新于 2026年1月30日，由 MDN 贡献者更新。
在 GitHub 上查看此页面 • 报告此内容的问题