Revision 1079832 of AnimationEffectTiming

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

<p>The <code>AnimationEffectTiming</code>&nbsp;interface&nbsp;of the&nbsp;<a href="/en-US/docs/Web/API/Web_Animations_API">Web Animations API</a>&nbsp;is a dictionary object of&nbsp;timing properties returned&nbsp;by the <code>timing</code> attribute of a&nbsp;{{domxref("KeyframeEffect")}}. It inherits its properties from {{domxref("AnimationEffectTimingReadOnly")}}. The difference being that these aren't <code>read only.</code></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>_This interface inherits its property from its parent,&nbsp;{{domxref("AnimationEffectTimingReadOnly")}}._</p>

<dl>
 <dt>{{domxref("AnimationEffectTimingReadOnly.delay")}}&nbsp;{{readonlyInline}}</dt>
 <dd>The number of&nbsp;milliseconds to delay the start of the animation.&nbsp;Defaults to&nbsp;<code>0</code>.</dd>
 <dt>{{domxref("AnimationEffectTimingReadOnly.endDelay")}}&nbsp;{{readonlyInline}}</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&nbsp;<code>0</code>.&nbsp;</dd>
 <dt>{{domxref("AnimationEffectTimingReadOnly.fill")}}&nbsp;{{readonlyInline}}</dt>
 <dd>Dictates whether the animation's effects should be reflected by the element(s) prior to playing (<code>backwards</code>), retained after the animation has completed playing (<code>forwards</code>), or&nbsp;<code>both</code>.&nbsp;Defaults to&nbsp;<code>none</code>.</dd>
 <dt>{{domxref("AnimationEffectTimingReadOnly.iterationStart")}}&nbsp;{{readonlyInline}}</dt>
 <dd>Dictates whether the animation's effects should be reflected by the element(s) prior to playing (<code>backwards</code>), retained after the animation has completed playing (<code>forwards</code>), or&nbsp;<code>both</code>.&nbsp;Defaults to&nbsp;<code>none</code>.</dd>
 <dt>{{domxref("AnimationEffectTimingReadOnly.iterations")}}&nbsp;{{readonlyInline}}</dt>
 <dd>The number of times the animation should repeat.&nbsp;Defaults to&nbsp;<code>1</code>, and can also take a value of infinity to make it repeat infinitely.</dd>
 <dt>{{domxref("AnimationEffectTimingReadOnly.duration")}}&nbsp;{{readonlyInline}}</dt>
 <dd>The number of milliseconds each iteration of the animation takes to complete.&nbsp;Defaults to&nbsp;<code>0</code>.</dd>
 <dt>{{domxref("AnimationEffectReadOnly.direction")}}&nbsp;{{readonlyInline}}</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>).&nbsp;Defaults to&nbsp;<code>normal</code>.</dd>
 <dt>{{domxref("AnimationEffectTimingReadOnly.easing")}}&nbsp;{{readonlyInline}}</dt>
 <dd>The rate of the animation's change over time. Accepts the pre-defined&nbsp;values&nbsp;<code>linear</code>,&nbsp;<code>ease</code>,&nbsp;<code>ease-in</code>,&nbsp;<code>ease-out</code>, and&nbsp;<code>ease-in-out</code>, or a custom cubic-bezier value like&nbsp;<code>cubic-bezier(0.42, 0, 0.58, 1)</code>.&nbsp;Defaults to&nbsp;<code>linear</code>.</dd>
</dl>

<h3 id="Parameters">&nbsp;</h3>

<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>&nbsp;at halfway complete by getting the duration of its <code>effect</code>'s <code>timing</code> attribute, which is an&nbsp;<code>AnimationEffectTiming</code>&nbsp;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>