web api overview
Web Animations API
The Web Animations API allows for synchronizing and timing changes to the presentation of a Web page, i.e., animation of DOM elements. It does so by combining two models: the Timing Model and the Animation Model.
Concepts and usage
The Web Animations API provides a common language for browsers and developers to describe animations on DOM elements. To get more information on the concepts behind the API and how to use it, read Using the Web Animations API.
Web Animations interfaces
Animation- : Provides playback controls and a timeline for an animation node or source. Can take an object created with the
KeyframeEffect()constructor.
- : Provides playback controls and a timeline for an animation node or source. Can take an object created with the
KeyframeEffect- : Describes sets of animatable properties and values, called keyframes and their timing options. These can then be played using the
Animation()constructor.
- : Describes sets of animatable properties and values, called keyframes and their timing options. These can then be played using the
AnimationTimeline- : Represents the timeline of animation. This interface exists to define timeline features (inherited by
DocumentTimelineand future timeline objects) and is not itself accessed by developers.
- : Represents the timeline of animation. This interface exists to define timeline features (inherited by
AnimationEvent- : Part of the CSS Animations module, capturing the animation name and elapsed time.
DocumentTimeline- : Represents animation timelines, including the default document timeline (accessed using the
timelineproperty).
- : Represents animation timelines, including the default document timeline (accessed using the
Extensions to other interfaces
The Web Animations API adds features to document and element.
Extensions to the Document interface
timeline- : The
DocumentTimelineobject representing the default document timeline.
- : The
getAnimations()- : Returns an Array of
Animationobjects currently in effect on elements in thedocument.
- : Returns an Array of
Extensions to the Element interface
animate()- : A shortcut method for creating and playing an animation on an element. It returns the created
Animationobject instance.
- : A shortcut method for creating and playing an animation on an element. It returns the created
getAnimations()- : Returns an Array of
Animationobjects currently affecting an element or which are scheduled to do so in the future.
- : Returns an Array of
Specifications
SpecificationsStandards references are available on the canonical MDN page.
See also
- CSS
animationshorthand property - CSS
animation-timelineproperty - Using the Web Animations API
- Using CSS animations
- CSS animations module
- CSS scroll-driven animations module