Get to know MDN better
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.
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.
Provides playback controls and a timeline for an animation node or source. Can take an object created with the KeyframeEffect() constructor.
KeyframeEffectDescribes sets of animatable properties and values, called keyframes and their timing options. These can then be played using the Animation() constructor.
AnimationTimelineRepresents the timeline of animation. This interface exists to define timeline features (inherited by DocumentTimeline and future timeline objects) and is not itself accessed by developers.
AnimationEventPart of the CSS Animations module, capturing the animation name and elapsed time.
DocumentTimelineRepresents animation timelines, including the default document timeline (accessed using the Document.timeline property).
The Web Animations API adds features to document and element.
The DocumentTimeline object representing the default document timeline.
document.getAnimations()Returns an Array of Animation objects currently in effect on elements in the document.
A shortcut method for creating and playing an animation on an element. It returns the created Animation object instance.
Element.getAnimations()Returns an Array of Animation objects currently affecting an element or which are scheduled to do so in the future.
| Web Animations |
This page was last modified on Nov 7, 2025 by MDN contributors.
Your blueprint for a better internet.
Visit Mozilla Corporation’s not-for-profit parent, the Mozilla Foundation.
Portions of this content are ©1998–2026 by individual mozilla.org contributors. Content available under a Creative Commons license.