W3cubDocs

/DOM

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.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.

Methods

Animation.cancel()
Clears all keyframeEffects caused 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.
Animation.updatePlaybackRate()
Sets the speed of an animation after first synchronizing its playback position.

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 compatibilityUpdate compatibility data on GitHub

Desktop
Chrome Edge Firefox Internet Explorer Opera Safari
Basic support 44
44
39 — 44
Uses the non-standard name: AnimationPlayer
? 48 No 26 No
Animation() constructor 61 ? 48
48
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.
 No ? No
cancel 39 ? 48
48
40 — 48
Disabled
Disabled From version 40 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.
 No 26 No
currentTime 39 ? 48
48
40 — 48
Disabled
Disabled From version 40 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.
 No 26 No
effect No ? 63
63
48
Disabled
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.
 No No No
finish 39 ? 48
48
40 — 48
Disabled
Disabled From version 40 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.
 No 26 No
finished No ? 63
63
40
Disabled
Disabled From version 40: 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.
 No No No
id 50 ? 48
48
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.
 No 37 No
oncancel 50 ? 48
48
42 — 48
Disabled
Disabled From version 42 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.
 No 37 No
onfinish 39 ? 48
48
42 — 48
Disabled
Disabled From version 42 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.
 No 26 No
pause 39 ? 48
48
36 — 48
Disabled
Disabled From version 36 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.
 No 26 No
pending No ? 59
59
Prior to version 59, the pending status was reported by a "pending" value returned from Animation.playState.
 No No No
play 39 ? 48
48
36 — 48
Disabled
Disabled From version 36 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.
 No 26 No
playbackRate 39 ? 48
48
42 — 48
Disabled
Disabled From version 42 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.
 No 26 No
playState 39
39
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.
 ? 48
48
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.
36 — 48
Disabled
Disabled From version 36 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.
 No 26
26
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.
 No
ready No ? 63
63
37
Disabled
Disabled From version 37: 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.
 No No No
reverse 39 ? 48
48
42 — 48
Disabled
Disabled From version 42 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.
 No 26 No
startTime 39 ? 48
48
39 — 48
Disabled
Disabled From version 39 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.
 No 26 No
timeline No ? 63
Disabled
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.
48 — 63
Disabled
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.
 No No No
updatePlaybackRate No No 60 No No No
Mobile
Android webview Chrome for Android Edge Mobile Firefox for Android Opera for Android iOS Safari Samsung Internet
Basic support 44
44
39 — 44
Uses the non-standard name: AnimationPlayer
44
44
39 — 44
Uses the non-standard name: AnimationPlayer
? 48 26 No 4.0
Animation() constructor 61 61 ? 48
48
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.
 ? No No
cancel 39 39 ? 48
48
40 — 48
Disabled
Disabled From version 40 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.
 26 No 4.0
currentTime 39 39 ? 48
48
40 — 48
Disabled
Disabled From version 40 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.
 26 No 4.0
effect No No ? 63
63
48
Disabled
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.
 No No No
finish 39 39 ? 48
48
40 — 48
Disabled
Disabled From version 40 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.
 26 No 4.0
finished No No ? 63
63
40
Disabled
Disabled From version 40: 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.
 No No No
id 50 50 ? 48
48
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.
 37 No 5.0
oncancel 50 50 ? 48
48
42 — 48
Disabled
Disabled From version 42 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.
 37 No 5.0
onfinish 39 39 ? 48
48
42 — 48
Disabled
Disabled From version 42 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.
 26 No 4.0
pause 39 39 ? 48
48
36 — 48
Disabled
Disabled From version 36 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.
 26 No 4.0
pending No No ? 59
59
Prior to version 59, the pending status was reported by a "pending" value returned from Animation.playState.
 No No No
play 39 39 ? 48
48
36 — 48
Disabled
Disabled From version 36 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.
 26 No 4.0
playbackRate 39 39 ? 48
48
42 — 48
Disabled
Disabled From version 42 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.
 26 No 4.0
playState 39
39
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.
 39
39
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.
 ? 48
48
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.
36 — 48
Disabled
Disabled From version 36 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.
 26
26
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.
 No 4.0
ready No No ? 63
63
37
Disabled
Disabled From version 37: 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.
 No No No
reverse 39 39 ? 48
48
42 — 48
Disabled
Disabled From version 42 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.
 26 No 4.0
startTime 39 39 ? 48
48
39 — 48
Disabled
Disabled From version 39 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.
 26 No 4.0
timeline No No ? 63
Disabled
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.
48 — 63
Disabled
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.
 No No No
updatePlaybackRate No No No 60 No No No

Edit this page on MDN

© 2005–2018 Mozilla Developer Network and individual contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/API/Animation