The Animation() constructor of the Web Animations API returns a new Animation object instance.
On this page
Animation: Animation() constructor
Syntax
js
new Animation()
new Animation(effect)
new Animation(effect, timeline)
Parameters
effectOptional-
The target effect, as an object based on the
AnimationEffectinterface, to assign to the animation. Although in the future other effects such asSequenceEffects orGroupEffects might be possible, the only kind of effect currently available isKeyframeEffect. This can benull(which is the default) to indicate that there should be no effect applied. timelineOptional-
Specifies the
timelinewith which to associate the animation, as an object of a type based on theAnimationTimelineinterface. Currently the only timeline type available isDocumentTimeline, but in the future there may be timelines associated with gestures or scrolling, for example. The default value isDocument.timeline, but this can be set tonullas well.
Examples
In the Follow the White Rabbit example, the Animation() constructor is used to create an Animation for the rabbitDownKeyframes using the document's timeline:
js
const rabbitDownAnimation = new Animation(
rabbitDownKeyframes,
document.timeline,
);
Specifications
| Specification |
|---|
| Web Animations # dom-animation-animation |
Browser compatibility
| Desktop | Mobile | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet | |
Animation |
75 | 79 | 48 | No | 62 | 13.1 | 75 | 75 | 48 | 54 | 13.4 | 11.0 |
See also
© 2005–2023 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/API/Animation/Animation