Web animations

The Animation() constructor of the Web Animations API returns a new Animation object instance.

The Web Animations API's cancel() method of the Animation interface clears all KeyframeEffects caused by this animation and aborts its playback.

The cancel event of the Animation interface is fired when the Animation.cancel() method is called or when the animation enters the "idle" play state from another state, such as when the animation is removed from an element before it finishes playing.

The commitStyles() method of the Web Animations API's Animation interface writes the computed values of the animation's current styles into its target element's style attribute.

The Animation.currentTime property of the Web Animations API returns and sets the current time value of the animation in milliseconds, whether running or paused.

The Animation.effect property of the Web Animations API gets and sets the target effect of an animation. The target effect may be either an effect object of a type based on AnimationEffect, such as KeyframeEffect, or null.

The finish() method of the Web Animations API's Animation Interface sets the current playback time to the end of the animation corresponding to the current playback direction.

The finish event of the Animation interface is fired when the animation finishes playing, either when the animation completes naturally, or when the Animation.finish() method is called to immediately cause the animation to finish up.

The Animation.finished read-only property of the Web Animations API returns a Promise which resolves once the animation has finished playing.

The Animation.id property of the Web Animations API returns or sets a string used to identify the animation.

The pause() method of the Web Animations API's Animation interface suspends playback of the animation.

The read-only Animation.pending property of the Web Animations API indicates whether the animation is currently waiting for an asynchronous operation such as initiating playback or pausing a running animation.

The persist() method of the Web Animations API's Animation interface explicitly persists an animation, preventing it from being automatically removed when it is replaced by another animation.

The play() method of the Web Animations API's Interface starts or resumes playing of an animation. If the animation is finished, calling play() restarts the animation, playing it from the beginning.

The Animation.playbackRate property of the Web Animations API returns or sets the playback rate of the animation.

The read-only Animation.playState property of the Web Animations API returns an enumerated value describing the playback state of an animation.

The read-only Animation.ready property of the Web Animations API returns a Promise which resolves when the animation is ready to play. A new promise is created every time the animation enters the "pending" play state as well as when the animation is canceled, since in both of those scenarios, the animation is ready to be started again.

The remove event of the Animation interface fires when the animation is automatically removed by the browser.

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, browsers automatically remove filling animations after they are replaced by newer animations, unless the developer explicitly specifies to…

The read-only Animation.replaceState property of the Web Animations API indicates whether the animation has been removed by the browser automatically after being replaced by another animation.

The Animation.reverse() method of the Interface reverses the playback direction, meaning the animation ends at its beginning. If called on an unplayed animation, the whole animation is played backwards. If called on a paused animation, the animation will continue in reverse.

The Animation.startTime property of the Animation interface is a double-precision floating-point value which indicates the scheduled time when an animation's playback should begin.

The Animation.timeline property of the Animation interface returns or sets the AnimationTimeline associated with this animation. A timeline is a source of time values for synchronization purposes, and is an AnimationTimeline-based object. By default, the animation's timeline and the Document's timeline are the same.

The updatePlaybackRate() method of the Web Animations API's Animation Interface sets the speed of an animation after first synchronizing its playback position.

The AnimationEffect interface of the Web Animations API is an interface representing animation effects.

The getComputedTiming() method of the AnimationEffect interface returns the calculated timing properties for this animation effect.

The AnimationEffect.getTiming() method of the AnimationEffect interface returns an object containing the timing properties for the Animation Effect.

The updateTiming() method of the AnimationEffect interface updates the specified timing properties for an animation effect.

The AnimationPlaybackEvent interface of the Web Animations API represents animation events.

The AnimationPlaybackEvent() constructor of the Web Animations API returns a new AnimationPlaybackEvent object instance.

The currentTime read-only property of the AnimationPlaybackEvent interface represents the current time of the animation that generated the event at the moment the event is queued. This will be unresolved if the animation was idle at the time the event was generated.

The timelineTime read-only property of the AnimationPlaybackEvent interface represents the time value of the animation's AnimationTimeline at the moment the event is queued. This will be unresolved if the animation was not associated with a timeline at the time the event was generated or if the associated timeline was inactive.

The AnimationTimeline interface of the Web Animations API represents the timeline of an animation. This interface exists to define timeline features, inherited by other timeline types:

The currentTime read-only property of the Web Animations API's AnimationTimeline interface returns the timeline's current time in milliseconds, or null if the timeline is inactive.

The duration read-only property of the Web Animations API's AnimationTimeline interface returns the maximum value for this timeline or null.

The getAnimations() method of the Document interface returns an array of all Animation objects currently in effect whose target elements are descendants of the document. This array includes CSS Animations, CSS Transitions, and Web Animations.

The timeline readonly property of the Document interface represents the default timeline of the current document. This timeline is a special instance of DocumentTimeline.

The DocumentTimeline interface of the Web Animations API represents animation timelines, including the default document timeline (accessed via Document.timeline).

The DocumentTimeline() constructor of the Web Animations API creates a new instance of the DocumentTimeline object associated with the active document of the current browsing context.

The Element interface's animate() method is a shortcut method which creates a new Animation, applies it to the element, then plays the animation. It returns the created Animation object instance.

Implicit to/from keyframes are supported

`options.composite` parameter

`options.id` parameter

`options.iterationComposite` parameter

`options.pseudoElement` parameter

`options.rangeEnd` parameter

`options.rangeStart` parameter

`options.timeline` parameter

The animationcancel event is fired when a CSS Animation unexpectedly aborts. In other words, any time it stops running without sending an Element/animationend_event event. This might happen when the animation-name is changed such that the animation is removed, or when the animating node is hidden using CSS. Therefore, either directly or because any of its…

The animationend event is fired when a CSS Animation has completed. If the animation aborts before reaching completion, such as if the element is removed from the DOM or the animation is removed from the element, the animationend event is not fired.

The animationiteration event is fired when an iteration of a CSS Animation ends, and another one begins. This event does not occur at the same time as the Element/animationend_event event, and therefore does not occur for animations with an animation-iteration-count of one.

The animationstart event is fired when a CSS Animation has started. If there is an animation-delay, this event will fire once the delay period has expired. A negative delay will cause the event to fire with an AnimationEvent/elapsedTime equal to the absolute value of the delay (and, correspondingly, the animation will begin playing at that time index into…

The getAnimations() method of the Element interface returns an array of all Animation objects affecting this element, or that are scheduled to do so in the future. It can optionally return Animation objects either for descendant elements and their pseudo-elements or just for the specified pseudo-element.

The KeyframeEffect interface of the Web Animations API lets us create sets of animatable properties and values, called keyframes. These can then be played using the Animation.Animation constructor.

The composite property of a KeyframeEffect resolves how an element's animation impacts its underlying property values.

The getKeyframes() method of a KeyframeEffect returns an Array of the computed keyframes that make up this animation along with their computed offsets.

The iterationComposite property of a KeyframeEffect resolves how the animation's property value changes accumulate or override each other upon each of the animation's iterations.

The KeyframeEffect() constructor of the Web Animations API returns a new KeyframeEffect object instance, and also allows you to clone an existing keyframe effect object instance.

The pseudoElement property of a KeyframeEffect interface is a string representing the pseudo-element being animated. It may be null for animations that do not target a pseudo-element. It performs as both a getter and a setter, except with animations and transitions generated by CSS.

The setKeyframes() method of the KeyframeEffect interface replaces the keyframes that make up the affected KeyframeEffect with a new set of keyframes.

The target property of a KeyframeEffect interface represents the element or pseudo-element being animated. It may be null for animations that do not target a specific element. It performs as both a getter and a setter, except with animations and transitions generated by CSS.

The getAnimations() method of the ShadowRoot interface returns an array of all Animation objects currently in effect whose target elements are descendants of the shadow tree. This array includes CSS Animations, CSS Transitions, and Web Animations.