Revision 1085879 of KeyframeEffectReadOnly

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

<p>The <strong><code>KeyframeEffectReadOnly</code></strong>&nbsp;interface of the <a href="/en-US/docs/Web/API/Web_Animations_API">Web Animations API</a> describes sets of animatable properties and values that can be played using&nbsp;the&nbsp;{{domxref("Animation.Animation()")}} constructor.&nbsp;</p>

<div class="note">
<p><strong>Note</strong>: The animations created with <code>KeyframeEffectReadOnly</code> are imutable. To create animations you can change with JavaScript on the fly, try&nbsp;{{domxref("KeyframeEffect")}} instead.</p>
</div>

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

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

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

<p><em>This interface inherits some of its methods and properties from its parent</em>&nbsp;{{domxref("AnimationEffectReadOnly")}}<em>.</em></p>

<dl>
 <dt>{{domxref("KeyframeEffectReadOnly.target")}}&nbsp;{{readonlyInline}}</dt>
 <dd>The element or pseudo-element being animated by this object.&nbsp;This may be <code>null</code> for animations that do not target a specific element.</dd>
 <dt>{{domxref("AnimationEffectReadOnly.timing")}} {{readonlyInline}}</dt>
 <dd>The {{domxref("AnimationEffectTimingReadOnly")}} object&nbsp;associated with the animation containing all the animation's timing values.</dd>
</dl>

<h3 id="Future_properties">Future properties</h3>

<p>The following options are currently not shipped anywhere, but will be added in the near future.</p>

<dl>
 <dt>{{domxref("KeyframeEffectReadOnly.composite")}}&nbsp;{{readonlyInline}}</dt>
 <dd>The composite operation property for resolving the property value changes&nbsp;between this and other&nbsp;keyframe effects.</dd>
 <dt>{{domxref("KeyframeEffectReadOnly.iterationComposite")}}&nbsp;{{readonlyInline}}</dt>
 <dd>The iteration composite operation for resolving the property value changes&nbsp;of this keyframe effect.</dd>
 <dt>{{domxref("KeyframeEffectReadOnly.spacing")}}&nbsp;{{readonlyInline}}</dt>
 <dd>The temporal spacing of the keyframe effect's iterations</dd>
</dl>

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

<dl>
 <dt>{{domxref("KeyframeEffectReadOnly.getKeyframes()")}}&nbsp;{{readonlyInline}}</dt>
 <dd>Returns the computed keyframes that make up this effect along with their computed keyframe offsets.</dd>
 <dt>{{domxref("AnimationEffectReadOnly.getComputedTiming()")}}&nbsp;{{readonlyInline}}</dt>
 <dd>Returns the calculated, current timing values for this keyframe effect.</dd>
</dl>

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

<p>In the <a href="https://codepen.io/rachelnabors/pen/QyOqqW">Down the Rabbit Hole (with CSS Animations) example</a>, all of Alice's animations are done with CSS. CSS Animations use <code>KeyframeEffectReadOnly</code> objects, so you can't tinker with them directly with the Web Animations API. But you <em>can</em>&nbsp;inspect them like so:</p>

<pre class="brush: js">
// Have a look at the animations on Alice. 
// Her effect is a KeyframeEffectReadOnly object.
document.getElementById("alice").getAnimations()[0].effect;

// Inspect her timing object. 
document.getElementById("alice").getAnimations()[0].effect.timing;

// See what her current timing values are right now. 
// How do they differ from the above?
document.getElementById("alice").getAnimations()[0].effect.getComputedTiming();
</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', '#keyframeeffectreadonly', 'keyframeEffectReadOnly' )}}</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>Edge</th>
   <th>Firefox (Gecko)</th>
   <th>Internet Explorer</th>
   <th>Opera</th>
   <th>Safari (WebKit)</th>
  </tr>
  <tr>
   <td>Basic support</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{ CompatGeckoDesktop("48.0")}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
  </tr>
  <tr>
   <td><code>composite</code>, <code>iterationComposite</code>, and <code>spacing</code> options</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}</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>{{CompatChrome(39.0)}}</td>
   <td>{{CompatChrome(39.0)}}</td>
   <td>{{ CompatGeckoMobile("48.0")}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
  </tr>
  <tr>
   <td><code>composite</code>, <code>iterationComposite</code>, and <code>spacing</code> options</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}</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/Web_Animations_API">Web Animations API</a></li>
 <li>Inherits from {{domxref("AnimationEffectReadOnly")}}.</li>
 <li>{{domxref("KeyframeEffect")}} inherits from it.</li>
 <li>Can be played with an&nbsp;{{domxref("Animation")}} object.</li>
</ul>