Revision 1065446 of Animation

<p>{{ APIRef("Web Animations API") }}{{SeeCompatTable}}</p>

<p>The <strong><code>Animation</code></strong> interface of the&nbsp;<a href="https://developer.mozilla.org/en-US/docs/Web/API/Web_Animations_API">Web Animations API</a>&nbsp;represents a single animation player and provides playback controls and a timeline for an animation node or source.</p>

<h2 id="Constructor">Constructor</h2>

<dl>
 <dt>{{domxref("Animation.Animation()", "Animation()")}}</dt>
 <dd>Creates a&nbsp;new&nbsp;<code>Animation</code>&nbsp;object instance.</dd>
</dl>

<h2 id="Properties">Properties</h2>

<dl>
 <dt>{{domxref("Animation.currentTime")}}</dt>
 <dd>The current time value&nbsp;of the animation in milliseconds, whether running or paused.&nbsp;If&nbsp;the animation lacks a&nbsp;{{domxref("AnimationTimeline", "timeline")}}, is inactive or hasn't been played yet, its value is <code>null</code>.</dd>
</dl>

<dl>
 <dt>{{domxref("Animation.effect")}}</dt>
 <dd>Gets and sets the {{domxref("KeyframeEffect")}}&nbsp;associated with this animation.</dd>
 <dt>{{domxref("Animation.finished")}} {{readOnlyInline}}</dt>
 <dd>Returns the current finished Promise for this animation.</dd>
</dl>

<dl>
 <dt>{{domxref("Animation.id")}}</dt>
 <dd>Gets and sets the <code>String</code> used to identify the animation.</dd>
 <dt>{{domxref("Animation.oncancel")}}</dt>
 <dd>Gets and sets the event handler for the <code>cancel</code> event.</dd>
 <dt>{{domxref("Animation.onfinish")}}</dt>
 <dd>Gets and sets the event handler&nbsp;for the <code>finish</code> event.</dd>
 <dt>{{domxref("Animation.playState")}} {{readOnlyInline}}</dt>
 <dd>Returns&nbsp;an enumerated value describing the playback state of an animation.</dd>
</dl>

<dl>
 <dt>{{domxref("Animation.playbackRate")}}</dt>
 <dd>Gets or sets&nbsp;the playback rate of the animation.</dd>
</dl>

<dl>
 <dt>{{domxref("Animation.ready")}} {{readOnlyInline}}</dt>
 <dd>Returns the current ready Promise for this animation.</dd>
</dl>

<dl>
 <dt>{{domxref("Animation.startTime")}}</dt>
 <dd>Gets or sets the scheduled time when an animation's playback should begin.</dd>
</dl>

<dl>
 <dt>{{domxref("Animation.timeline")}}</dt>
 <dd>Gets or sets the {{domxref("AnimationTimeline", "timeline")}} associated with this animation.</dd>
</dl>

<h2 id="Methods">Methods</h2>

<dl>
 <dt>{{domxref("Animation.cancel()")}}</dt>
 <dd>Clears all {{domxref("KeyframeEffect", "keyframeEffects")}} caused by this animation and aborts its playback.</dd>
</dl>

<dl>
 <dt>{{domxref("Animation.finish()")}}</dt>
 <dd>Seeks either end of an animation, depending on whether the animation is playing or reversing.</dd>
</dl>

<dl>
 <dt>{{domxref("Animation.pause()")}}</dt>
 <dd>Suspends playing of an animation.</dd>
</dl>

<dl>
 <dt>{{domxref("Animation.play()")}}</dt>
 <dd>Starts or resumes playing of an animation, or begins the animation again if it previously finished.</dd>
</dl>

<dl>
 <dt>{{domxref("Animation.reverse()")}}</dt>
 <dd>Moves the animation backwards, stopping at the start of the animation.</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", "#the-animation-interface", "Animation")}}</td>
   <td>{{Spec2("Web Animations")}}</td>
   <td>Initial definition</td>
  </tr>
 </tbody>
</table>

<h2 id="Browser_compatibility">Browser compatibility</h2>

<div>{{CompatibilityTable}}</div>

<div id="compat-desktop">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Feature</th>
   <th>Chrome</th>
   <th>Firefox (Gecko)</th>
   <th>Internet Explorer</th>
   <th>Opera</th>
   <th>Safari (WebKit)</th>
  </tr>
  <tr>
   <td>Basic support</td>
   <td>{{CompatChrome(39.0)}} [1]</td>
   <td>{{CompatGeckoDesktop(40.0)}} [2]</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}</td>
  </tr>
 </tbody>
</table>
</div>

<div id="compat-mobile">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Feature</th>
   <th>Android</th>
   <th>Firefox Mobile (Gecko)</th>
   <th>IE Phone</th>
   <th>Opera Mobile</th>
   <th>Safari Mobile</th>
  </tr>
  <tr>
   <td>Basic support</td>
   <td>{{CompatVersionUnknown}} [1]</td>
   <td>{{CompatGeckoDesktop(40.0)}} [2]</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}</td>
  </tr>
 </tbody>
</table>
</div>

<p>[1] Implemented as <code>AnimationPlayer</code> (interface name in an early version of the spec).</p>

<p>[2] Before Firefox 40, it was available as <code>AnimationPlayer</code>. In both cases, you need to set the preference <code>dom.animations-api.core.enabled</code> to be able to use it.</p>

<p>&nbsp;</p>