The Animation()
constructor of the Web Animations API returns a new Animation
object instance.
Syntax
var animation = new Animation([effect][, timeline]);
Parameters
effect
Optional- The target effect, as an object based on the
AnimationEffectReadOnly
interface, to assign to the animation. Although in the future other effects such asSequenceEffect
s orGroupEffect
s 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. timeline
Optional- Specifies the
timeline
with which to associate the animation, as an object of a type based on theAnimationTimeline
interface. Currently the only timeline type available isDocumentTimeline
, but in the future there my be timelines associated with gestures or scrolling, for example. The default value isDocument.timeline
, but this can be set tonull
as 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
:
var rabbitDownAnimation = new Animation(rabbitDownKeyframes, document.timeline);
Specifications
Specification | Status | Comment |
---|---|---|
Web Animations The definition of 'Animation()' in that specification. |
Working Draft | Editor's draft. |
Browser compatibility
The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.
Desktop | Mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
Animation() constructor | Chrome Full support 61 | Edge Full support ≤79 | Firefox
Full support
48
| IE No support No | Opera Full support 48 | Safari No support No | WebView Android Full support 61 | Chrome Android Full support 61 | Firefox Android
Full support
48
| Opera Android Full support 45 | Safari iOS No support No | Samsung Internet Android Full support 8.0 |
Legend
- Full support
- Full support
- No support
- No support
- Experimental. Expect behavior to change in the future.
- Experimental. Expect behavior to change in the future.
- User must explicitly enable this feature.
- User must explicitly enable this feature.