Web Animations API

TheWeb Animations APIallows 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.

Concepts and usage

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, readUsing the Web Animations API.

Web Animations interfaces

Animation

Provides playback controls and a timeline for an animation node or source. Can take an object created with theKeyframeEffect()constructor.

KeyframeEffect

Describes sets of animatable properties and values, calledkeyframesand their timing options. These can then be played using theAnimation()constructor.

AnimationTimeline

Represents the timeline of animation. This interface exists to define timeline features (inherited byDocumentTimelineand 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 theDocument.timelineproperty).

Extensions to other interfaces

The Web Animations API adds some new features todocumentandelement.

Extensions to theDocumentinterface

document.timeline

TheDocumentTimelineobject representing the default document timeline.

document.getAnimations()

Returns an Array ofAnimationobjects currently in effect on elements in thedocument.

Extensions to theElementinterface

Element.animate()

A shortcut method for creating and playing an animation on an element. It returns the createdAnimationobject instance.

Element.getAnimations()

Returns an Array ofAnimationobjects currently affecting an element or which are scheduled to do so in future.

Specifications

Specification
Web Animations

See also