Revision 1080390 of AnimationEffectTiming

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

<p>The <code>AnimationEffectTiming</code> interface of the <a href="/en-US/docs/Web/API/Web_Animations_API">Web Animations API</a> is a dictionary object of timing properties returned by the <code>timing</code> attribute of a {{domxref("KeyframeEffect")}}. It inherits its properties from {{domxref("AnimationEffectTimingReadOnly")}}, but in a non-read only form.</p>

<h2 id="Syntax">Syntax</h2>

<div class="syntaxbox">
<pre class="brush: js">
var animationDuration = animation.effect.timing.duration;
</pre>
</div>

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

<p><em>This interface inherits its properties from its parent, {{domxref("AnimationEffectTimingReadOnly")}}, in a non-read only form.</em></p>

<dl>
 <dt>{{domxref("AnimationEffectTimingReadOnly.delay")}}</dt>
 <dd>The number of&nbsp;milliseconds to delay the start of the animation. Defaults to&nbsp;<code>0</code>.</dd>
 <dt>{{domxref("AnimationEffectTimingReadOnly.endDelay")}}</dt>
 <dd>The number of milliseconds to delay after the end of an animation. This is primarily of use when sequencing animations based on the end time of another animation. Defaults to <code>0</code>.</dd>
 <dt>{{domxref("AnimationEffectTimingReadOnly.fill")}}</dt>
 <dd>Dictates whether the animation's effects should be reflected by the element(s) state prior to playing (<code>backwards</code>), retained after the animation has completed playing (<code>forwards</code>), or <code>both</code>. Defaults to <code>none</code>.</dd>
 <dt>{{domxref("AnimationEffectTimingReadOnly.iterationStart")}}</dt>
 <dd>A number representing the which repetition the animation begins at and its progress through it.</dd>
 <dt>{{domxref("AnimationEffectTimingReadOnly.iterations")}}</dt>
 <dd>The number of times the animation should repeat. Defaults to <code>1</code>, and can also take a value of infinity to make it repeat infinitely.</dd>
 <dt>{{domxref("AnimationEffectTimingReadOnly.duration")}}</dt>
 <dd>The number of milliseconds each iteration of the animation takes to complete. Defaults to <code>0</code>.</dd>
 <dt>{{domxref("AnimationEffectReadOnly.direction")}}</dt>
 <dd>Whether the animation runs forwards (<code>normal</code>), backwards (<code>reverse</code>), switches direction after each iteration (<code>alternate</code>), or runs backwards and switches direction after each iteration (<code>alternate-reverse</code>). Defaults to <code>normal</code>.</dd>
 <dt>{{domxref("AnimationEffectTimingReadOnly.easing")}}</dt>
 <dd>The rate of the animation's change over time. Accepts the pre-defined values <code>linear</code>, <code>ease</code>, <code>ease-in</code>, <code>ease-out</code>, and <code>ease-in-out</code>, or a custom cubic-bezier value like <code>cubic-bezier(0.42, 0, 0.58, 1)</code>. Defaults to <code>linear</code>.</dd>
</dl>

<h2 id="Examples">Examples</h2>

<p>In the <a href="https://codepen.io/rachelnabors/pen/PNYGZQ?editors=0010">Growing and Shrinking Alice</a> example, we set Alice's animation — <code>aliceChange</code> — at halfway complete by getting the duration of its {{domxref("Animation.effect", "effect")}}'s {{domxref("AnimationEffectReadOnly.timing", "timing")}} attribute, which returns an <code>AnimationEffectTiming</code> object:</p>

<pre class="brush: js">
aliceChange.currentTime = aliceChange.effect.timing.duration / 2 ;
</pre>

<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', '#animationeffecttiming', 'AnimationEffectTiming' )}}</td>
   <td>{{Spec2('Web Animations')}}</td>
   <td>Editor's draft.</td>
  </tr>
 </tbody>
</table>

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

<p>{{CompatibilityTable}}</p>

<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>{{CompatVersionUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatVersionUnknown}}</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>Android Webview</th>
   <th>Chrome for Android</th>
   <th>Firefox Mobile (Gecko)</th>
   <th>Firefox OS</th>
   <th>IE Mobile</th>
   <th>Opera Mobile</th>
   <th>Safari Mobile</th>
  </tr>
  <tr>
   <td>Basic support</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{ CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}</td>
  </tr>
 </tbody>
</table>
</div>

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

<ul>
 <li><a href="/en-US/docs/Web/API/KeyframeEffect">KeyframeEffect Interface</a></li>
 <li><a href="/en-US/docs/Web/API/Web_Animations_API">Web Animations API</a></li>
 <li>Inherits from {{domxref("AnimationEffectTimingReadOnly")}}</li>
</ul>