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 interface of the Web Animations API represents a single animation player and provides playback controls and a timeline for an animation node or source.
Constructor
Animation()- Creates a new
Animationobject instance.
Properties
Animation.currentTime- The current time value of the animation in milliseconds, whether running or paused. If the animation lacks a
timeline, is inactive or hasn't been played yet, its value isnull.
Animation.effect- Gets and sets the
AnimationEffectReadOnlyassociated with this animation. This will usually be aKeyframeEffectobject. Animation.finishedRead only- Returns the current finished Promise for this animation.
Animation.id- Gets and sets the
Stringused to identify the animation. Animation.playStateRead only- Returns an enumerated value describing the playback state of an animation.
Animation.playbackRate- Gets or sets the playback rate of the animation.
Animation.readyRead only- Returns the current ready Promise for this animation.
Animation.startTime- Gets or sets the scheduled time when an animation's playback should begin.
Animation.timeline- Gets or sets the
timelineassociated with this animation.
Event handlers
Animation.oncancel- Gets and sets the event handler for the
cancelevent. Animation.onfinish- Gets and sets the event handler for the
finishevent.
Methods
Animation.cancel()- Clears all
keyframeEffectscaused by this animation and aborts its playback.
Animation.finish()- Seeks either end of an animation, depending on whether the animation is playing or reversing.
Animation.pause()- Suspends playing of an animation.
Animation.play()- Starts or resumes playing of an animation, or begins the animation again if it previously finished.
Animation.reverse()- Reverses playback direction, stopping at the start of the animation. If the animation is finished or unplayed, it will play from end to beginning.
Specifications
| Specification | Status | Comment |
|---|---|---|
| Web Animations The definition of 'Animation' in that specification. |
Working Draft | Initial definition |
Browser compatibility
| Feature | Chrome | Firefox (Gecko) | Microsoft Edge | Internet Explorer | Opera | Safari (WebKit) |
|---|---|---|---|---|---|---|
| Basic support | 39.0 [1] | 48 (48)[2][3] | ? | No support | No support | No support |
| Constructor | No support | 48 (48)[2][3] | ? | No support | No support | No support |
| Feature | Android | Firefox Mobile (Gecko) | IE Phone | Opera Mobile | Safari Mobile |
|---|---|---|---|---|---|
| Basic support | (Yes) [1] | 48.0 (48)[2][3] | No support | No support | No support |
| Constructor | No support | 48.0 (48)[2][3] | No support | No support | No support |
[1] Before Chrome 44, implemented as AnimationPlayer (interface name in an early version of the spec).
[2] The Web Animations API is only enabled by default in Firefox Developer Edition and Nightly builds. You can enable it in beta and release builds by setting the preference dom.animations-api.core.enabled to true, and can disable it in any Firefox version by setting this preference to false.
[3] Prior to Firefox 51, the Animation.effect property was read-only.