W3cubDocs

/Web APIs

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.

EventTarget Animation

Constructor

Animation()

Creates a new Animation object instance.

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 AnimationEffect 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 Read only

Indicates whether the animation is active, has been automatically removed after being replaced by another animation, or has been explicitly persisted by a call to Animation.persist().

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.

Instance methods

Animation.cancel()

Clears all keyframeEffects caused by this animation and aborts its playback.

Animation.commitStyles()

Commits the current styling state of an animation to the element being animated, even after that animation has been removed. It will cause the current 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, preventing it from being automatically removed when another animation replaces it.

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.

Events

cancel

Fires when the Animation.cancel() method is called or when the animation enters the "idle" play state from another state.

finish

Fires when the animation finishes playing.

remove

Fires when the animation is automatically removed by the browser.

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 (or equivalent user agent client hint Sec-CH-Prefers-Reduced-Motion) to create a complimentary experience for users who have expressed a preference for no animated experiences.

Specifications

Browser compatibility

Desktop Mobile
Chrome Edge Firefox Internet Explorer Opera Safari WebView Android Chrome Android Firefox for Android Opera Android Safari on IOS Samsung Internet
Animation 75 79 48 No 62 13.1 75 75 48 54 13.4 11.0
Animation 75 79 48 No 62 13.1 75 75 48 54 13.4 11.0
cancel 75 79 48 No 62 13.1 75 75 48 54 13.4 11.0
cancel_event 75 79 48 No 62 13.1 75 75 48 54 13.4 11.0
commitStyles 84 84 75 No 70 13.1 84 84 79 60 13.4 14.0
currentTime 75 79 48 No 62 13.1 75 75 48 54 13.4 11.0
effect 75 79 63 No 62 13.1 75 75 63 54 13.4 11.0
finish 75 79 48 No 62 13.1 75 75 48 54 13.4 11.0
finish_event 75 79 48 No 62 13.1 75 75 48 54 13.4 11.0
finished 84 84 63 No 70 13.1 84 84 63 60 13.4 14.0
id 75 79 48 No 62 13.1 75 75 48 54 13.4 11.0
pause 75 79 48 No 62 13.1 75 75 48 54 13.4 11.0
pending 76 79
59Before version 59, the pending status was reported by a "pending" value returned from Animation.playState.
No 63 13.1 76 76
59Before version 59, the pending status was reported by a "pending" value returned from Animation.playState.
54 13.4 12.0
persist 84 84 75 No 70 13.1 84 84 79 60 13.4 14.0
play 75 79 48 No 62 13.1 75 75 48 54 13.4 11.0
playState
75Before 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.
79
48Before 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
62Before 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.
13.1
75Before 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.
75Before 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.
48Before 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.
54Before 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.
13.4
11.0Before 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.
playbackRate 75 79 48 No 62 13.1 75 75 48 54 13.4 11.0
ready 84 84 63 No 70 13.1 84 84 63 60 13.4 14.0
remove_event 84 84 75 No 70 13.1 84 84 79 60 13.4 14.0
remove_filling_animation 84 84 75 No 70 13.1 84 84 79 60 13.4 14.0
replaceState 84 84 75 No 70 13.1 84 84 79 60 13.4 14.0
reverse 75 79 48 No 62 13.1 75 75 48 54 13.4 11.0
startTime 75 79 48 No 62 13.1 75 75 48 54 13.4 11.0
timeline 84 84
75Currently only the getter is supported
No 70
13.1Currently only the getter is supported
84 84
79Currently only the getter is supported
60
13.4Currently only the getter is supported
14.0
updatePlaybackRate 76 79 60 No 63 13.1 76 76 60 54 13.4 12.0

See also

© 2005–2023 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/API/Animation