在此页

• 概念和用法
• Web 动画接口
• 扩展到其它接口
• 规范
• 另请参阅
• 相关话题

Web 动画 API allows for synchronizing and timing changes to the presentation of a Web page, i.e. animation of DOM elements. It does so by combining two models: the Timing Model and the Animation Model.

概念和用法

The Web Animations API provides a common language for browsers and developers to describe animations on DOM elements. To get more information on the concepts behind the API and how to use it, read 使用 Web 动画 API .

Web 动画接口

动画

Provides playback controls and a timeline for an animation node or source. Can take an object created with the KeyframeEffect() 构造函数。

KeyframeEffect

Describes sets of animatable properties and values, called keyframes and their timing options . These can then be played using the Animation() 构造函数。

AnimationTimeline

Represents the timeline of animation. This interface exists to define timeline features (inherited by DocumentTimeline and future timeline objects) and is not itself accessed by developers.

AnimationEvent

Actually part of CSS Animations.

DocumentTimeline

Represents animation timelines, including the default document timeline (accessed using the Document.timeline 特性)。

EffectTiming

Element.animate() , KeyframeEffectReadOnly.KeyframeEffectReadOnly() ，和 KeyframeEffect.KeyframeEffect() all accept an optional dictionary object of timing properties.

扩展到其它接口

The Web Animations API adds some new features to document and element .

扩展到 Document interface

document.timeline

DocumentTimeline object representing the default document timeline.

document.getAnimations()

Returns an Array of 动画 objects currently in effect on elements in the document .

扩展到 元素 interface

Element.animate()

A shortcut method for creating and playing an animation on an element. It returns the created 动画 对象实例。

Element.getAnimations()

Returns an Array of 动画 objects currently affecting an element or which are scheduled to do so in future.

规范

规范	状态	注释
Web 动画	工作草案	初始定义

另请参阅

• 使用 Web 动画 API
• Web 动画演示
• Polyfill
• Firefox 的当前实现： AreWeAnimatedYet

• 浏览器支持测试

元数据

• 最后修改： 2020 年 7 月 29 日

相关话题

1. Web 动画 API
2. 指南

   1. 使用 Web 动画 API
   2. Web 动画 API 概念
   3. 关键帧格式
3. 接口

   1. 动画
   2. AnimationEffect
   3. AnimationEvent
   4. AnimationTimeline
   5. AnimationPlaybackEvent
   6. DocumentTimeline
   7. EffectTiming
   8. KeyframeEffect
4. 特性

   1. Document.timeline
5. 方法

   1. Document.getAnimations()
   2. Element.animate()