This is an experimental technology
Because this technology's specification has not stabilized, check the compatibility table for usage in various browsers. Also note that the syntax and behavior of an experimental technology is subject to change in future versions of browsers as the specification changes.
KeyframeEffectReadOnly interface of the Web Animations API describes sets of animatable properties and values that can be played using the
Animation.Animation() constructor, and which are inherited by
Note: The animations created with
- Returns a new
KeyframeEffectReadOnlyobject instance, and also allows you to clone an existing keyframe effect object instance.
This interface inherits some of its methods and properties from its parent
- The element or pseudo-element being animated by this object. This may be
nullfor animations that do not target a specific element.
AnimationEffectTimingReadOnlyobject associated with the animation containing all the animation's timing values.
The following options are currently not shipped anywhere, but will be added in the near future.
- The composite operation property for resolving the property value changes between this and other keyframe effects.
- The iteration composite operation for resolving the property value changes of this keyframe effect.
- The temporal spacing of the keyframe effect's iterations
- Returns the computed keyframes that make up this effect along with their computed keyframe offsets.
- Returns the calculated, current timing values for this keyframe effect.
In the Down the Rabbit Hole (with CSS Animations) example, all of Alice's animations are done with CSS. CSS Animations use
KeyframeEffectReadOnly objects, so you can't tinker with them directly with the Web Animations API. But you can inspect them like so:
// Have a look at the animations on Alice. // Her effect is a KeyframeEffectReadOnly object. document.getElementById("alice").getAnimations().effect; // Inspect her timing object. document.getElementById("alice").getAnimations().effect.timing; // See what her current timing values are right now. // How do they differ from the above? document.getElementById("alice").getAnimations().effect.getComputedTiming();
The definition of 'keyframeEffectReadOnly' in that specification.
|Working Draft||Editor's draft.|
|Feature||Chrome||Edge||Firefox (Gecko)||Internet Explorer||Opera||Safari (WebKit)|
|Basic support||(Yes)||No support||(Yes)||No support||No support||No support|
||No support||No support||No support||No support||No support||No support|
|Clone constructor (2nd type of constructor)||(Yes)||No support||No support||No support||No support||No support|
|Feature||Android||Android Webview||Chrome for Android||Firefox Mobile (Gecko)||IE Mobile||Opera Mobile||Safari Mobile|
|Basic support||(Yes)||(Yes)||(Yes)||(Yes)||No support||No support||No support|
||No support||No support||No support||No support||No support||No support||No support|
|Clone constructor (2nd type of constructor)||(Yes)||(Yes)||(Yes)||No support||No support||No support||No support|
 Only enabled in Firefox 52 Nightly and Dev edition. Turned off in Beta/release.