Animation

This is an experimental technology
Check the Browser compatibility table carefully before using this in production.

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 Animation object 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 is null.
Animation.effect
Gets and sets the AnimationEffectReadOnly associated with this animation. This will usually be a KeyframeEffect object.
Animation.finished Read only
Returns the current finished Promise for this animation.
Animation.id
Gets and sets the String used to identify the animation.
Animation.pending Read only
Indicates whether the animation is currently waiting for an asynchronous operation such as initiating playback or pausing a running animation.
Animation.playState Read only
Returns an enumerated value describing the playback state of an animation.
Animation.playbackRate
Gets or sets the playback rate of the animation.
Animation.ready Read only
Returns the current ready Promise for this animation.
animation.replaceState
Returns the replace state of the animation. This will be active if the animation has been replaced, or persisted if Animation.persist() has been invoked on it.
Animation.startTime
Gets or sets the scheduled time when an animation's playback should begin.
Animation.timeline
Gets or sets the timeline associated with this animation.

Event handlers

Animation.oncancel
Gets and sets the event handler for the cancel event.
Animation.onfinish
Gets and sets the event handler for the finish event.
animation.onremove
Allows you to set and run an event handler that fires when the animation is removed (i.e., put into an active replace state).

Methods

Animation.cancel()
Clears all keyframeEffects caused by this animation and aborts its playback.
animation.commitStyles()
Commits the end styling state of an animation to the element being animated, even after that animation has been removed. It will cause the end styling state to be written to the element being animated, in the form of properties inside a style attribute.
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.persist()
Explicitly persists an animation, when it would otherwise be removed due to the browser's Automatically removing filling animations behavior.
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.
Animation.updatePlaybackRate()
Sets the speed of an animation after first synchronizing its playback position.

Automatically removing filling animations

It is possible to trigger a large number of animations on the same element. If they are indefinite (i.e., forwards-filling), this can result in a huge animations list, which could create a memory leak. For this reason, modern browsers have implemented the part of the Web Animations spec that automatically removes overriding forward filling animations, unless the developer explicitly specifies to keep them.

You can see this in action in our simple replace indefinite animations demo. The related JavaScript features are:

  • animation.commitStyles() for commiting the end styling state of an animation to the element being animated, even after that animation has been removed.
  • animation.onremove for setting and running an event handler that fires when the animation is removed (i.e., put into an active replace state).
  • animation.persist() for when you explicitly want an animations to be retained.
  • animation.replaceState to return the replace state of the animation. This will be active if the animation has been removed, or persisted if persist() has been invoked.

Accessibility concerns

Blinking and flashing animation can be problematic for people with cognitive concerns such as Attention Deficit Hyperactivity Disorder (ADHD). Additionally, certain kinds of motion can be a trigger for Vestibular disorders, epilepsy, and migraine, and Scotopic sensitivity.

Consider providing a mechanism for pausing or disabling animation, as well as using the Reduced Motion Media Query to create a complimentary experience for users who have expressed a preference for no animated experiences.

Specifications

Specification Status Comment
Web Animations
The definition of 'Animation' in that specification.
Working Draft Initial definition

Browser compatibility

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
Animation
Experimental
Chrome Full support 44
Full support 44
No support 39 — 44
Alternate Name
Alternate Name Uses the non-standard name: AnimationPlayer
Edge Full support ≤79Firefox Full support 48
Full support 48
No support 46 — 48
Disabled
Disabled From version 46 until version 48 (exclusive): this feature is behind the dom.animations-api.core.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE No support NoOpera Full support 26Safari Full support 13.1WebView Android Full support 44
Full support 44
No support 39 — 44
Alternate Name
Alternate Name Uses the non-standard name: AnimationPlayer
Chrome Android Full support 44
Full support 44
No support 39 — 44
Alternate Name
Alternate Name Uses the non-standard name: AnimationPlayer
Firefox Android Full support 48
Full support 48
No support 46 — 48
Disabled
Disabled From version 46 until version 48 (exclusive): this feature is behind the dom.animations-api.core.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Opera Android Full support 26Safari iOS Full support 13.4Samsung Internet Android Full support 4.0
Animation() constructor
Experimental
Chrome Full support 61Edge Full support ≤79Firefox Full support 48
Full support 48
No support 46 — 48
Disabled
Disabled From version 46 until version 48 (exclusive): this feature is behind the dom.animations-api.core.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE No support NoOpera Full support 48Safari No support NoWebView Android Full support 61Chrome Android Full support 61Firefox Android Full support 48
Full support 48
No support 46 — 48
Disabled
Disabled From version 46 until version 48 (exclusive): this feature is behind the dom.animations-api.core.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Opera Android Full support 45Safari iOS No support NoSamsung Internet Android Full support 8.0
cancel
Experimental
Chrome Full support 39Edge Full support ≤79Firefox Full support 48
Full support 48
No support 46 — 48
Disabled
Disabled From version 46 until version 48 (exclusive): this feature is behind the dom.animations-api.core.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE No support NoOpera Full support 26Safari No support NoWebView Android Full support 39Chrome Android Full support 39Firefox Android Full support 48
Full support 48
No support 46 — 48
Disabled
Disabled From version 46 until version 48 (exclusive): this feature is behind the dom.animations-api.core.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Opera Android Full support 26Safari iOS No support NoSamsung Internet Android Full support 4.0
commitStyles
Experimental
Chrome No support No
Notes
No support No
Notes
Notes Currently Chrome Canary only
Edge No support NoFirefox Full support 75IE No support NoOpera No support NoSafari Full support 13.1WebView Android No support NoChrome Android No support No
Notes
No support No
Notes
Notes Currently Chrome Canary only
Firefox Android No support NoOpera Android No support NoSafari iOS Partial support 13.4
Notes
Partial support 13.4
Notes
Notes Passes 13/27 web platform tests.
Samsung Internet Android No support No
currentTime
Experimental
Chrome Full support 39Edge Full support ≤79Firefox Full support 48
Full support 48
No support 46 — 48
Disabled
Disabled From version 46 until version 48 (exclusive): this feature is behind the dom.animations-api.core.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE No support NoOpera Full support 26Safari No support NoWebView Android Full support 39Chrome Android Full support 39Firefox Android Full support 48
Full support 48
No support 46 — 48
Disabled
Disabled From version 46 until version 48 (exclusive): this feature is behind the dom.animations-api.core.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Opera Android Full support 26Safari iOS No support NoSamsung Internet Android Full support 4.0
effect
Experimental
Chrome No support NoEdge No support NoFirefox Full support 63
Full support 63
Full support 48
Notes Disabled
Notes This property is supported in Firefox 48 but is read-only. It became writable in Firefox 51.
Disabled From version 48: this feature is behind the dom.animations-api.core.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE No support NoOpera No support NoSafari No support NoWebView Android No support NoChrome Android No support NoFirefox Android Full support 63
Full support 63
Full support 48
Notes Disabled
Notes This property is supported in Firefox 48 but is read-only. It became writable in Firefox 51.
Disabled From version 48: this feature is behind the dom.animations-api.core.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Opera Android No support NoSafari iOS No support NoSamsung Internet Android No support No
finish
Experimental
Chrome Full support 39Edge Full support ≤79Firefox Full support 48
Full support 48
No support 46 — 48
Disabled
Disabled From version 46 until version 48 (exclusive): this feature is behind the dom.animations-api.core.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE No support NoOpera Full support 26Safari No support NoWebView Android Full support 39Chrome Android Full support 39Firefox Android Full support 48
Full support 48
No support 46 — 48
Disabled
Disabled From version 46 until version 48 (exclusive): this feature is behind the dom.animations-api.core.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Opera Android Full support 26Safari iOS No support NoSamsung Internet Android Full support 4.0
finished
Experimental
Chrome No support NoEdge No support NoFirefox Full support 63
Full support 63
Full support 46
Disabled
Disabled From version 46: this feature is behind the dom.animations-api.core.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE No support NoOpera No support NoSafari No support NoWebView Android No support NoChrome Android No support NoFirefox Android Full support 63
Full support 63
Full support 46
Disabled
Disabled From version 46: this feature is behind the dom.animations-api.core.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Opera Android No support NoSafari iOS No support NoSamsung Internet Android No support No
id
Experimental
Chrome Full support 50Edge Full support ≤79Firefox Full support 48
Full support 48
No support 46 — 48
Disabled
Disabled From version 46 until version 48 (exclusive): this feature is behind the dom.animations-api.core.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE No support NoOpera Full support 37Safari No support NoWebView Android Full support 50Chrome Android Full support 50Firefox Android Full support 48
Full support 48
No support 46 — 48
Disabled
Disabled From version 46 until version 48 (exclusive): this feature is behind the dom.animations-api.core.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Opera Android Full support 37Safari iOS No support NoSamsung Internet Android Full support 5.0
oncancel
Experimental
Chrome Full support 50Edge Full support ≤79Firefox Full support 48
Full support 48
No support 46 — 48
Disabled
Disabled From version 46 until version 48 (exclusive): this feature is behind the dom.animations-api.core.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE No support NoOpera Full support 37Safari No support NoWebView Android Full support 50Chrome Android Full support 50Firefox Android Full support 48
Full support 48
No support 46 — 48
Disabled
Disabled From version 46 until version 48 (exclusive): this feature is behind the dom.animations-api.core.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Opera Android Full support 37Safari iOS No support NoSamsung Internet Android Full support 5.0
onfinish
Experimental
Chrome Full support 39Edge Full support ≤79Firefox Full support 48
Full support 48
No support 46 — 48
Disabled
Disabled From version 46 until version 48 (exclusive): this feature is behind the dom.animations-api.core.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE No support NoOpera Full support 26Safari No support NoWebView Android Full support 39Chrome Android Full support 39Firefox Android Full support 48
Full support 48
No support 46 — 48
Disabled
Disabled From version 46 until version 48 (exclusive): this feature is behind the dom.animations-api.core.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Opera Android Full support 26Safari iOS No support NoSamsung Internet Android Full support 4.0
onremove
Experimental
Chrome No support No
Notes
No support No
Notes
Notes Currently Chrome Canary only
Edge No support NoFirefox Full support 75IE No support NoOpera No support NoSafari Full support 13.1WebView Android No support NoChrome Android No support No
Notes
No support No
Notes
Notes Currently Chrome Canary only
Firefox Android No support NoOpera Android No support NoSafari iOS Full support 13.4Samsung Internet Android No support No
pause
Experimental
Chrome Full support 39Edge Full support ≤79Firefox Full support 48
Full support 48
No support 46 — 48
Disabled
Disabled From version 46 until version 48 (exclusive): this feature is behind the dom.animations-api.core.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE No support NoOpera Full support 26Safari No support NoWebView Android Full support 39Chrome Android Full support 39Firefox Android Full support 48
Full support 48
No support 46 — 48
Disabled
Disabled From version 46 until version 48 (exclusive): this feature is behind the dom.animations-api.core.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Opera Android Full support 26Safari iOS No support NoSamsung Internet Android Full support 4.0
pending
Experimental
Chrome No support NoEdge No support NoFirefox Full support 59
Notes
Full support 59
Notes
Notes Prior to version 59, the pending status was reported by a "pending" value returned from Animation.playState.
IE No support NoOpera No support NoSafari No support NoWebView Android No support NoChrome Android No support NoFirefox Android Full support 59
Notes
Full support 59
Notes
Notes Prior to version 59, the pending status was reported by a "pending" value returned from Animation.playState.
Opera Android No support NoSafari iOS No support NoSamsung Internet Android No support No
persist
Experimental
Chrome No support No
Notes
No support No
Notes
Notes Currently Chrome Canary only
Edge No support NoFirefox Full support 75IE No support NoOpera No support NoSafari Full support 13.1WebView Android No support NoChrome Android No support No
Notes
No support No
Notes
Notes Currently Chrome Canary only
Firefox Android No support NoOpera Android No support NoSafari iOS Full support 13.4Samsung Internet Android No support No
play
Experimental
Chrome Full support 39Edge Full support ≤79Firefox Full support 48
Full support 48
No support 46 — 48
Disabled
Disabled From version 46 until version 48 (exclusive): this feature is behind the dom.animations-api.core.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE No support NoOpera Full support 26Safari No support NoWebView Android Full support 39Chrome Android Full support 39Firefox Android Full support 48
Full support 48
No support 46 — 48
Disabled
Disabled From version 46 until version 48 (exclusive): this feature is behind the dom.animations-api.core.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Opera Android Full support 26Safari iOS No support NoSamsung Internet Android Full support 4.0
playbackRate
Experimental
Chrome Full support 39Edge Full support ≤79Firefox Full support 48
Full support 48
No support 46 — 48
Disabled
Disabled From version 46 until version 48 (exclusive): this feature is behind the dom.animations-api.core.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE No support NoOpera Full support 26Safari No support NoWebView Android Full support 39Chrome Android Full support 39Firefox Android Full support 48
Full support 48
No support 46 — 48
Disabled
Disabled From version 46 until version 48 (exclusive): this feature is behind the dom.animations-api.core.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Opera Android Full support 26Safari iOS No support NoSamsung Internet Android Full support 4.0
playState
Experimental
Chrome Full support 39
Notes
Full support 39
Notes
Notes Before Chrome 50/Opera 37, this property returned idle for an animation that had not yet started. Starting with Chrome 50/Opera 37, it shows paused.
Edge Full support ≤79Firefox Full support 48
Notes
Full support 48
Notes
Notes Prior to Firefox 59, this property returned pending for Animations with incomplete asynchronous operations but as of Firefox 59 this is indicated by the separate Animation.pending property. This reflects recent changes to the specification.
No support 46 — 48
Disabled
Disabled From version 46 until version 48 (exclusive): this feature is behind the dom.animations-api.core.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE No support NoOpera Full support 26
Notes
Full support 26
Notes
Notes Before Chrome 50/Opera 37, this property returned idle for an animation that had not yet started. Starting with Chrome 50/Opera 37, it shows paused.
Safari No support NoWebView Android Full support 39
Notes
Full support 39
Notes
Notes Before Chrome 50/Opera 37, this property returned idle for an animation that had not yet started. Starting with Chrome 50/Opera 37, it shows paused.
Chrome Android Full support 39
Notes
Full support 39
Notes
Notes Before Chrome 50/Opera 37, this property returned idle for an animation that had not yet started. Starting with Chrome 50/Opera 37, it shows paused.
Firefox Android Full support 48
Notes
Full support 48
Notes
Notes Prior to Firefox 59, this property returned pending for Animations with incomplete asynchronous operations but as of Firefox 59 this is indicated by the separate Animation.pending property. This reflects recent changes to the specification.
No support 46 — 48
Disabled
Disabled From version 46 until version 48 (exclusive): this feature is behind the dom.animations-api.core.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Opera Android Full support 26
Notes
Full support 26
Notes
Notes Before Chrome 50/Opera 37, this property returned idle for an animation that had not yet started. Starting with Chrome 50/Opera 37, it shows paused.
Safari iOS No support NoSamsung Internet Android Full support 4.0
Notes
Full support 4.0
Notes
Notes Before Samsung Internet 5.0/Opera 37, this property returned idle for an animation that had not yet started. Starting with Samsung Internet 5.0/Opera 37, it shows paused.
ready
Experimental
Chrome No support NoEdge No support NoFirefox Full support 63
Full support 63
Full support 46
Disabled
Disabled From version 46: this feature is behind the dom.animations-api.core.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE No support NoOpera No support NoSafari No support NoWebView Android No support NoChrome Android No support NoFirefox Android Full support 63
Full support 63
Full support 46
Disabled
Disabled From version 46: this feature is behind the dom.animations-api.core.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Opera Android No support NoSafari iOS No support NoSamsung Internet Android No support No
Browsers automatically remove indefinite filling animations.
Experimental
Chrome No support No
Notes
No support No
Notes
Notes Currently Chrome Canary only
Edge No support NoFirefox Full support 75IE No support NoOpera No support NoSafari Full support 13.1WebView Android No support NoChrome Android No support No
Notes
No support No
Notes
Notes Currently Chrome Canary only
Firefox Android No support NoOpera Android No support NoSafari iOS Full support 13.4Samsung Internet Android No support No
replaceState
Experimental
Chrome No support No
Notes
No support No
Notes
Notes Currently Chrome Canary only
Edge No support NoFirefox Full support 75IE No support NoOpera No support NoSafari Full support 13.1WebView Android No support NoChrome Android No support No
Notes
No support No
Notes
Notes Currently Chrome Canary only
Firefox Android No support NoOpera Android No support NoSafari iOS Full support 13.4Samsung Internet Android No support No
reverse
Experimental
Chrome Full support 39Edge Full support ≤79Firefox Full support 48
Full support 48
No support 46 — 48
Disabled
Disabled From version 46 until version 48 (exclusive): this feature is behind the dom.animations-api.core.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE No support NoOpera Full support 26Safari No support NoWebView Android Full support 39Chrome Android Full support 39Firefox Android Full support 48
Full support 48
No support 46 — 48
Disabled
Disabled From version 46 until version 48 (exclusive): this feature is behind the dom.animations-api.core.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Opera Android Full support 26Safari iOS No support NoSamsung Internet Android Full support 4.0
startTime
Experimental
Chrome Full support 39Edge Full support ≤79Firefox Full support 48
Full support 48
No support 46 — 48
Disabled
Disabled From version 46 until version 48 (exclusive): this feature is behind the dom.animations-api.core.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE No support NoOpera Full support 26Safari No support NoWebView Android Full support 39Chrome Android Full support 39Firefox Android Full support 48
Full support 48
No support 46 — 48
Disabled
Disabled From version 46 until version 48 (exclusive): this feature is behind the dom.animations-api.core.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Opera Android Full support 26Safari iOS No support NoSamsung Internet Android Full support 4.0
timeline
Experimental
Chrome No support No
Notes
No support No
Notes
Notes Currently Chrome Canary only
Edge No support NoFirefox Full support 75
Notes
Full support 75
Notes
Notes Currently only the getter is supported
Full support 63
Disabled
Disabled From version 63: this feature is behind the dom.animations-api.timelines.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
No support 48 — 63
Notes Disabled
Notes This property is supported in Firefox 48 but is read-only. It became writable in Firefox 49.
Disabled From version 48 until version 63 (exclusive): this feature is behind the dom.animations-api.core.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE No support NoOpera No support NoSafari Full support 13.1
Notes
Full support 13.1
Notes
Notes Currently only the getter is supported
WebView Android No support NoChrome Android No support No
Notes
No support No
Notes
Notes Currently Chrome Canary only
Firefox Android Full support 63
Disabled
Full support 63
Disabled
Disabled From version 63: this feature is behind the dom.animations-api.timelines.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
No support 48 — 63
Notes Disabled
Notes This property is supported in Firefox 48 but is read-only. It became writable in Firefox 49.
Disabled From version 48 until version 63 (exclusive): this feature is behind the dom.animations-api.core.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Opera Android No support NoSafari iOS Full support 13.4
Notes
Full support 13.4
Notes
Notes Currently only the getter is supported
Samsung Internet Android No support No
updatePlaybackRate
Experimental
Chrome No support NoEdge No support NoFirefox Full support 60IE No support NoOpera No support NoSafari No support NoWebView Android No support NoChrome Android No support NoFirefox Android Full support 60Opera Android No support NoSafari iOS No support NoSamsung Internet Android No support No

Legend

Full support  
Full support
Partial support  
Partial support
No support  
No support
Experimental. Expect behavior to change in the future.
Experimental. Expect behavior to change in the future.
See implementation notes.
See implementation notes.
User must explicitly enable this feature.
User must explicitly enable this feature.
Uses a non-standard name.
Uses a non-standard name.

See also