Web/API/Animation

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 [[../../../../../../mdn.github.io/dom-examples/web-animations-api/replace-indefinite-animations|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 AnimationsThe definition of 'Animation' in that specification.	Working Draft	Initial definition

Browser compatibility

Update compatibility data on GitHub

	Desktop						Mobile
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	Android webview	Chrome for Android	Firefox for Android	Opera for Android	Safari on iOS	Samsung 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 79	Firefox 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 No	Opera Full support 26	Safari Full support 13.1	WebView 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 26	Safari iOS Full support 13.4	Samsung Internet Android Full support 4.0
`Animation()` constructor Experimental'	Chrome Full support 61	Edge Full support 79	Firefox 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 No	Opera Full support 48	Safari No support No	WebView Android Full support 61	Chrome Android Full support 61	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 45	Safari iOS No support No	Samsung Internet Android Full support 8.0
`cancel` Experimental'	Chrome Full support 39	Edge Full support 79	Firefox 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 No	Opera Full support 26	Safari No support No	WebView Android Full support 39	Chrome Android Full support 39	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 26	Safari iOS No support No	Samsung 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 No	Firefox Full support 75	IE No support No	Opera No support No	Safari Full support 13.1	WebView Android No support No	Chrome Android No support No Notes' No support No Notes' Notes' Currently Chrome Canary only	Firefox Android No support No	Opera Android No support No	Safari 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 39	Edge Full support 79	Firefox 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 No	Opera Full support 26	Safari No support No	WebView Android Full support 39	Chrome Android Full support 39	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 26	Safari iOS No support No	Samsung Internet Android Full support 4.0
`effect` Experimental'	Chrome Full support 75	Edge Full support 79	Firefox 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 No	Opera Full support 62	Safari No support No	WebView Android Full support 75	Chrome Android Full support 75	Firefox 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 Full support 54	Safari iOS No support No	Samsung Internet Android Full support 11.0
`finish` Experimental'	Chrome Full support 39	Edge Full support 79	Firefox 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 No	Opera Full support 26	Safari No support No	WebView Android Full support 39	Chrome Android Full support 39	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 26	Safari iOS No support No	Samsung Internet Android Full support 4.0
`finished` Experimental'	Chrome No support No	Edge No support No	Firefox 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 No	Opera No support No	Safari No support No	WebView Android No support No	Chrome Android No support No	Firefox 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 No	Safari iOS No support No	Samsung Internet Android No support No
`id` Experimental'	Chrome Full support 50	Edge Full support 79	Firefox 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 No	Opera Full support 37	Safari No support No	WebView Android Full support 50	Chrome Android Full support 50	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 37	Safari iOS No support No	Samsung Internet Android Full support 5.0
`oncancel` Experimental'	Chrome Full support 50	Edge Full support 79	Firefox 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 No	Opera Full support 37	Safari No support No	WebView Android Full support 50	Chrome Android Full support 50	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 37	Safari iOS No support No	Samsung Internet Android Full support 5.0
`onfinish` Experimental'	Chrome Full support 39	Edge Full support 79	Firefox 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 No	Opera Full support 26	Safari No support No	WebView Android Full support 39	Chrome Android Full support 39	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 26	Safari iOS No support No	Samsung 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 No	Firefox Full support 75	IE No support No	Opera No support No	Safari Full support 13.1	WebView Android No support No	Chrome Android No support No Notes' No support No Notes' Notes' Currently Chrome Canary only	Firefox Android No support No	Opera Android No support No	Safari iOS Full support 13.4	Samsung Internet Android No support No
`pause` Experimental'	Chrome Full support 39	Edge Full support 79	Firefox 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 No	Opera Full support 26	Safari No support No	WebView Android Full support 39	Chrome Android Full support 39	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 26	Safari iOS No support No	Samsung Internet Android Full support 4.0
`pending` Experimental'	Chrome No support No	Edge No support No	Firefox 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 No	Opera No support No	Safari No support No	WebView Android No support No	Chrome Android No support No	Firefox 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 No	Safari iOS No support No	Samsung Internet Android No support No
`persist` Experimental'	Chrome No support No Notes' No support No Notes' Notes' Currently Chrome Canary only	Edge No support No	Firefox Full support 75	IE No support No	Opera No support No	Safari Full support 13.1	WebView Android No support No	Chrome Android No support No Notes' No support No Notes' Notes' Currently Chrome Canary only	Firefox Android No support No	Opera Android No support No	Safari iOS Full support 13.4	Samsung Internet Android No support No
`play` Experimental'	Chrome Full support 39	Edge Full support 79	Firefox 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 No	Opera Full support 26	Safari No support No	WebView Android Full support 39	Chrome Android Full support 39	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 26	Safari iOS No support No	Samsung Internet Android Full support 4.0
`playbackRate` Experimental'	Chrome Full support 39	Edge Full support 79	Firefox 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 No	Opera Full support 26	Safari No support No	WebView Android Full support 39	Chrome Android Full support 39	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 26	Safari iOS No support No	Samsung 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 79	Firefox 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 No	Opera 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 No	WebView 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 No	Samsung 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 No	Edge No support No	Firefox 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 No	Opera No support No	Safari No support No	WebView Android No support No	Chrome Android No support No	Firefox 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 No	Safari iOS No support No	Samsung 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 No	Firefox Full support 75	IE No support No	Opera No support No	Safari Full support 13.1	WebView Android No support No	Chrome Android No support No Notes' No support No Notes' Notes' Currently Chrome Canary only	Firefox Android No support No	Opera Android No support No	Safari iOS Full support 13.4	Samsung Internet Android No support No
`replaceState` Experimental'	Chrome No support No Notes' No support No Notes' Notes' Currently Chrome Canary only	Edge No support No	Firefox Full support 75	IE No support No	Opera No support No	Safari Full support 13.1	WebView Android No support No	Chrome Android No support No Notes' No support No Notes' Notes' Currently Chrome Canary only	Firefox Android No support No	Opera Android No support No	Safari iOS Full support 13.4	Samsung Internet Android No support No
`reverse` Experimental'	Chrome Full support 39	Edge Full support 79	Firefox 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 No	Opera Full support 26	Safari No support No	WebView Android Full support 39	Chrome Android Full support 39	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 26	Safari iOS No support No	Samsung Internet Android Full support 4.0
`startTime` Experimental'	Chrome Full support 39	Edge Full support 79	Firefox 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 No	Opera Full support 26	Safari No support No	WebView Android Full support 39	Chrome Android Full support 39	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 26	Safari iOS No support No	Samsung 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 No	Firefox 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 No	Opera No support No	Safari Full support 13.1 Notes' Full support 13.1 Notes' Notes' Currently only the getter is supported	WebView Android No support No	Chrome 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 No	Safari 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 No	Edge No support No	Firefox Full support 60	IE No support No	Opera No support No	Safari No support No	WebView Android No support No	Chrome Android No support No	Firefox Android Full support 60	Opera Android No support No	Safari iOS No support No	Samsung 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.