---
title: Web Animations API
slug: Web/API/Web_Animations_API
tags:
  - API
  - Animation
  - Landing
  - NeedsTranslation
  - Reference
  - TopicStub
  - Web Animations
translation_of: Web/API/Web_Animations_API
---
<p>{{DefaultAPISidebar("Web Animations")}}</p>

<p>The <strong>Web Animations API</strong> 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.</p>

<h2 id="Concepts_and_usage">Concepts and usage</h2>

<p>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 <a href="/en-US/docs/Web/API/Web_Animations_API/Using_the_Web_Animations_API">Using the Web Animations API</a>.</p>

<h2 id="Web_Animations_interfaces">Web Animations interfaces</h2>

<dl>
 <dt>{{domxref("Animation")}}</dt>
 <dd>Provides playback controls and a timeline for an animation node or source. Can take an object created with the {{domxref("KeyframeEffect.KeyframeEffect", "KeyframeEffect()")}} constructor.</dd>
 <dt>{{domxref("KeyframeEffect")}}</dt>
 <dd>Describes sets of animatable properties and values, called <strong>keyframes </strong>and their <a href="/en-US/docs/Web/API/Web_Animations_API/Animation_timing_options">timing options</a>. These can then be played using the {{domxref("Animation.Animation", "Animation()")}} constructor.</dd>
 <dt>{{domxref("AnimationTimeline")}}</dt>
 <dd>Represents the timeline of animation. This interface exists to define timeline features (inherited by {{domxref("DocumentTimeline")}} and future timeline objects) and is not itself accessed by developers.</dd>
 <dt>{{domxref("AnimationEvent")}}</dt>
 <dd>Actually part of CSS Animations.</dd>
 <dt>{{domxref("DocumentTimeline")}}</dt>
 <dd>Represents animation timelines, including the default document timeline (accessed using the {{domxref("Document.timeline")}} property).</dd>
 <dt>{{domxref("EffectTiming")}}</dt>
 <dd>{{domxref("Element.animate()")}}, {{domxref("KeyframeEffectReadOnly.KeyframeEffectReadOnly()")}}, and {{domxref("KeyframeEffect.KeyframeEffect()")}} all accept an optional dictionary object of timing properties.</dd>
</dl>

<h2 id="Extensions_to_other_interfaces">Extensions to other interfaces</h2>

<p>The Web Animations API adds some new features to {{domxref("document")}} and {{domxref("element")}}.</p>

<h3 id="Extensions_to_the_Document_interface">Extensions to the <code>Document</code> interface</h3>

<dl>
 <dt>{{domxref("document.timeline")}}</dt>
 <dd>The <code>DocumentTimeline</code> object representing the default document timeline.</dd>
 <dt>{{domxref("document.getAnimations()")}}</dt>
 <dd>Returns an Array of {{domxref("Animation")}} objects currently in effect on elements in the <code>document</code>.</dd>
 <dt>
 <h3 id="Extensions_to_the_Element_interface">Extensions to the <code>Element</code> interface</h3>
 </dt>
 <dt>{{domxref("Element.animate()")}}</dt>
 <dd>A shortcut method for creating and playing an animation on an element. It returns the created {{domxref("Animation")}} object instance.</dd>
 <dt>{{domxref("Element.getAnimations()")}}</dt>
 <dd>Returns an Array of {{domxref("Animation")}} objects currently affecting an element or which are scheduled to do so in future.</dd>
</dl>

<h2 id="Specifications">Specifications</h2>

<table class="standard-table">
 <tbody>
  <tr>
   <th scope="col">Specification</th>
   <th scope="col">Status</th>
   <th scope="col">Comment</th>
  </tr>
  <tr>
   <td>{{SpecName('Web Animations')}}</td>
   <td>{{Spec2('Web Animations')}}</td>
   <td>Initial definition</td>
  </tr>
 </tbody>
</table>

<h2 id="See_also">See also</h2>

<ul>
 <li><a href="/en-US/docs/Web/API/Web_Animations_API/Using_the_Web_Animations_API">Using the Web Animations API</a></li>
 <li><a href="https://mozdevs.github.io/Animation-examples/">Web Animations demos</a></li>
 <li><a href="https://github.com/web-animations/web-animations-js">Polyfill</a></li>
 <li>Firefox's current implementation: <a href="https://birtles.github.io/areweanimatedyet/">AreWeAnimatedYet</a></li>
 <li>
  <p><a href="http://codepen.io/danwilson/pen/xGBKVq">Browser support test</a></p>
 </li>
</ul>