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 Animation() constructor of the Web Animations API returns a new Animation object instance.


var animation = new Animation(effect, timeline);


effect Optional
The target KeyframeEffect to assign to the animation. (In the future, other kinds of Effects like SequenceEffects or GroupEffects may be possible, but for now, the only kind of Effect is a KeyframeEffect.)
timeline Optional
Specifies the timeline with which to associate the animation. (Currently the only timeline type available is a DocumentTimeline, but in the future there my be timelines associated with gestures or scrolling for example.) Defaults to Document.timeline. This can also be set to null.


In the Follow the White Rabbit example, the Animation constructor is used to create an Animation for the rabbitDownKeyframes using the document's timeline:

var rabbitDownAnimation = new Animation(rabbitDownKeyframes, document.timeline);


Specification Status Comment
Web Animations
The definition of 'animation()' in that specification.
Working Draft Editor's draft.

Browser compatibility

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Basic support No support 48 (48) [1] No support No support No support
Feature Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
Basic support No support 48.0 (48) [1] No support No support No support

[1] Note that the KeyframeEffect and DocumentTimeline interfaces turned off in release channels, so this is not currently useful.

See also

Document Tags and Contributors

 Contributors to this page: birtles, chrisdavidmills, rachelnabors
 Last updated by: birtles,