Web 动画 API

概念和用法

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 对象的数组。

规范

参见

• CSS animation 简写属性
• CSS animation-timeline 属性
• 使用 Web 动画 API
• 使用 CSS 动画
• CSS 动画模块
• CSS 滚动驱动动画模块