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.
Creates a new
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
Gets and sets the
AnimationEffectassociated with this animation. This will usually be a
Returns the current finished Promise for this animation.
Gets and sets the
Stringused to identify the animation.
Indicates whether the animation is currently waiting for an asynchronous operation such as initiating playback or pausing a running animation.
Returns an enumerated value describing the playback state of an animation.
Gets or sets the playback rate of the animation.
Returns the current ready Promise for this animation.
Returns the replace state of the animation. This will be
activeif the animation has been replaced, or
Animation.persist()has been invoked on it.
Gets or sets the scheduled time when an animation's playback should begin.
Gets or sets the
timelineassociated with this animation.
keyframeEffectscaused by this animation and aborts its playback.
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
Seeks either end of an animation, depending on whether the animation is playing or reversing.
Suspends playing of an animation.
Explicitly persists an animation, when it would otherwise be removed due to the browser's Automatically removing filling animations behavior.
Starts or resumes playing of an animation, or begins the animation again if it previously finished.
Reverses playback direction, stopping at the start of the animation. If the animation is finished or unplayed, it will play from end to beginning.
Sets the speed of an animation after first synchronizing its playback position.
Fires when the
Animation.cancel()method is called or when the animation enters the
"idle"play state from another state.
Fires when the animation finishes playing.
Fires when the animation is removed (i.e., put into an
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.
animation.commitStyles()for committing the end styling state of an animation to the element being animated, even after that animation has been removed.
removeevent on the
Animationinterface fires when the animation is removed (i.e., put into an
animation.persist()for when you explicitly want an animation to be retained.
animation.replaceStateto return the replace state of the animation. This will be
activeif the animation has been removed, or
persist()has been invoked.
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.
|Web Animations |
BCD tables only load in the browser