Web Animations API

This is an experimental technology
Because this technology's specification has not stabilized, check the compatibility table for usage in various browsers. Also note that the syntax and behavior of an experimental technology is subject to change in future versions of browsers as the specification changes.

The Web Animations 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.

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, read Using 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 the KeyframeEffect() constructor.
KeyframeEffect
Describes sets of animatable properties and values, called keyframes and their timing optionsThese can then be played using the Animation() constructor.
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.
DocumentTimeline
Represents animation timelines, including the default document timeline (accessed using the Document.timeline property).
AnimationEffectTiming
An object containing timing properties returned by the timing attribute of a KeyframeEffect. It inherits its properties from AnimationEffectTimingReadOnly, but in a non-read only form.
SharedKeyframeList
Represents a sequence of keyframes that can be shared between KeyframeEffect objects. By using SharedKeyframeList objects, multiple KeyframeEffect objects can re-use the same keyframes without paying the cost of parsing them multiple times.
AnimationEffectTimingProperties
Element.animate(), KeyframeEffectReadOnly.KeyframeEffectReadOnly(), and KeyframeEffect.KeyframeEffect() all accept an optional dictionary object of timing properties.

Extensions to other interfaces

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

Extensions to the Document interface

document.timeline
The DocumentTimeline object representing the default document timeline.
document.getAnimations()
Returns an Array of Animation objects currently in effect on elements in the document.

Extensions to the Element interface

Element.animate()
A shortcut method for creating and playing an animation on an element. It returns the created Animation object instance.

Web Animations read-only interfaces

The following interfaces are included in the spec for purposes such as defining features used in multiple other places, or to serve as bases for multiple interfaces which can all be used as values of the same properties. You wouldn't directly use these in web development work, but they may be interesting for library authors to understand how the technology works so their implementations can be more effective, or for browser engineers looking for an easier reference than the spec provides.

AnimationEffectTimingReadOnly
A dictionary object of timing properties, which are inherited by the mutable AnimationEffectTiming interface associated with KeyframeEffect.
AnimationEffectReadOnly
Defines current and future "Animation Effects" like KeyframeEffect, which can be passed to Animation objects for playing, and KeyframeEffectReadOnly which is used by KeyframeEffect (inherited by CSS Animations and Transitions). All values of Animation.effect are of types based on AnimationEffectReadOnly.
KeyframeEffectReadOnly
Describes sets of animatable properties and values that can be played using the Animation() constructor, and which are inherited by KeyframeEffect

Specifications

Specification Status Comment
Web Animations Working Draft Initial definition

Browser compatibility

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Basic support (Element.animate()) 36.0
 
48 (48) No support

29
28 behind pref

No support
KeyframeEffect and KeyframeEffectReadOnly clone constructors (Yes) No support[1] No support No support No support
Feature Android Android Webview Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile Chrome for Android
Basic support No support 42.0 48.0 (48) No support No support No support 42.0
KeyframeEffect and KeyframeEffectReadOnly clone constructors (Yes) (Yes) No support[1] No support No support No support (Yes)

[1] Only enabled in Firefox 52 Nightly and Dev edition. Turned off in Beta/release.

See also

Document Tags and Contributors

 Last updated by: chrisdavidmills,