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.


Animation() (en-US)
Creates a new Animation object instance.


Animation.currentTime (en-US)
The current time value of the animation in milliseconds, whether running or paused. If the animation lacks a timeline (en-US), is inactive or hasn't been played yet, its value is null.
Animation.effect (en-US)
Gets and sets the AnimationEffectReadOnly (en-US) associated with this animation. This will usually be a KeyframeEffect (en-US) object.
Animation.finished (en-US) Read only
Returns the current finished Promise for this animation. (en-US)
Gets and sets the String used to identify the animation.
Animation.pending (en-US) Read only
Indicates whether the animation is currently waiting for an asynchronous operation such as initiating playback or pausing a running animation.
Animation.playState (en-US) Read only
Returns an enumerated value describing the playback state of an animation.
Animation.playbackRate (en-US)
Gets or sets the playback rate of the animation.
Animation.ready (en-US) Read only
Returns the current ready Promise for this animation.
Animation.startTime (en-US)
Gets or sets the scheduled time when an animation's playback should begin.
Animation.timeline (en-US)
Gets or sets the timeline (en-US) associated with this animation.

Manipuladores de evento

Animation.oncancel (en-US)
Gets and sets the event handler for the cancel event.
Animation.onfinish (en-US)
Gets and sets the event handler for the finish event.


Animation.cancel() (en-US)
Clears all keyframeEffects (en-US) caused by this animation and aborts its playback.
Animation.finish() (en-US)
Seeks either end of an animation, depending on whether the animation is playing or reversing.
Animation.pause() (en-US)
Suspends playing of an animation. (en-US)
Starts or resumes playing of an animation, or begins the animation again if it previously finished.
Animation.reverse() (en-US)
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() (en-US)
Sets the speed of an animation after first synchronizing its playback position.

PreocupaƧƵes de acessibilidade

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.


EspecificaĆ§Ć£o Estado ComentĆ”rio
Web Animations
The definition of 'Animation' in that specification.
Working Draft Initial definition

Compatibilidade de navegador

BCD tables only load in the browser