Revision 1082576 of AnimationEffectTimingReadOnly

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

<p>The <strong><code>AnimationEffectTimingReadOnly</code></strong>&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, which are inherited by the mutable {{domxref("AnimationEffectTiming")}} interface associated with&nbsp;{{domxref("KeyframeEffect")}}.</p>

<p>Additionally, <strong><code>AnimationEffectTimingReadOnly</code></strong> is used by both&nbsp;{{domxref("AnimationEffectReadOnly")}} (returned by {{domxref("AnimationEffectReadOnly.timing")}}) and {{domxref("KeyframeEffectReadOnly")}} (inherits from {{domxref("AnimationEffectReadOnly")}}).</p>

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

<dl>
 <dt>{{domxref("AnimationEffectTimingReadOnly.delay")}}{{readonlyInline}}</dt>
 <dd>The number of&nbsp;milliseconds to delay the start of the animation. Defaults to&nbsp;<code>0</code>.</dd>
 <dt>{{domxref("AnimationEffectTimingReadOnly.direction")}}{{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>). Defaults to <code>normal</code>.</dd>
 <dt>{{domxref("AnimationEffectTimingReadOnly.duration")}}{{readonlyInline}}</dt>
 <dd>The number of milliseconds each iteration of the animation takes to complete. Defaults to <code>0</code>.</dd>
 <dt>{{domxref("AnimationEffectTimingReadOnly.easing")}}{{readonlyInline}}</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>
 <dt>{{domxref("AnimationEffectTimingReadOnly.endDelay")}}{{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 <code>0</code>.</dd>
 <dt>{{domxref("AnimationEffectTimingReadOnly.fill")}}{{readonlyInline}}</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")}}{{readonlyInline}}</dt>
 <dd>A number representing&nbsp;which repetition the animation begins at and its progress through it.</dd>
 <dt>{{domxref("AnimationEffectTimingReadOnly.iterations")}}{{readonlyInline}}</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>
</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', '#animationeffecttimingreadonly', 'AnimationEffectTimingReadOnly' )}}</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>{{CompatNo}}</td>
   <td>{{CompatVersionUnknown}}</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>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>

<p>&nbsp;</p>

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

<ul>
 <li><a href="/en-US/docs/Web/API/Web_Animations_API">Web Animations API</a></li>
 <li>{{domxref("AnimationEffectTiming")}}</li>
 <li>{{domxref("AnimationEffectReadOnly.timing")}}</li>
</ul>