{{SeeCompatTable}}{{ APIRef("Web Animations API") }}
The KeyframeEffectReadOnly
interface of the Web Animations API describes sets of animatable properties and values that can be played using the {{domxref("Animation.Animation()")}} constructor, and which are inherited by {{domxref("KeyframeEffect")}}.
Note: The animations created with KeyframeEffectReadOnly
are imutable. To create animations you can change with JavaScript on the fly, try {{domxref("KeyframeEffect")}} instead.
Constructor
- {{domxref("KeyframeEffectReadOnly.KeyframeEffectReadOnly()")}}
- Returns a new
KeyframeEffectReadOnly
object instance.
Properties
This interface inherits some of its methods and properties from its parent {{domxref("AnimationEffectReadOnly")}}.
- {{domxref("KeyframeEffectReadOnly.target")}} {{readonlyInline}}
- The element or pseudo-element being animated by this object. This may be
null
for animations that do not target a specific element. - {{domxref("AnimationEffectReadOnly.timing")}} {{readonlyInline}}
- The {{domxref("AnimationEffectTimingReadOnly")}} object associated with the animation containing all the animation's timing values.
Future properties
The following options are currently not shipped anywhere, but will be added in the near future.
- {{domxref("KeyframeEffectReadOnly.composite")}} {{readonlyInline}}
- The composite operation property for resolving the property value changes between this and other keyframe effects.
- {{domxref("KeyframeEffectReadOnly.iterationComposite")}} {{readonlyInline}}
- The iteration composite operation for resolving the property value changes of this keyframe effect.
- {{domxref("KeyframeEffectReadOnly.spacing")}} {{readonlyInline}}
- The temporal spacing of the keyframe effect's iterations
Methods
- {{domxref("KeyframeEffectReadOnly.getKeyframes()")}} {{readonlyInline}}
- Returns the computed keyframes that make up this effect along with their computed keyframe offsets.
- {{domxref("AnimationEffectReadOnly.getComputedTiming()")}} {{readonlyInline}}
- Returns the calculated, current timing values for this keyframe effect.
Examples
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()[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();
Specifications
Specification | Status | Comment |
---|---|---|
{{SpecName('Web Animations', '#keyframeeffectreadonly', 'keyframeEffectReadOnly' )}} | {{Spec2('Web Animations')}} | Editor's draft. |
Browser compatibility
{{CompatibilityTable}}
Feature | Chrome | Edge | Firefox (Gecko) | Internet Explorer | Opera | Safari (WebKit) |
---|---|---|---|---|---|---|
Basic support | {{CompatUnknown}} | {{CompatUnknown}} | {{ CompatGeckoDesktop("48.0")}} | {{CompatUnknown}} | {{CompatUnknown}} | {{CompatUnknown}} |
composite , iterationComposite , and spacing options |
{{CompatNo}} | {{CompatNo}} | {{CompatNo}} | {{CompatNo}} | {{CompatNo}} | {{CompatNo}} |
Feature | Android | Android Webview | Chrome for Android | Firefox Mobile (Gecko) | Firefox OS | IE Mobile | Opera Mobile | Safari Mobile |
---|---|---|---|---|---|---|---|---|
Basic support | {{CompatUnknown}} | {{CompatChrome(39.0)}} | {{CompatChrome(39.0)}} | {{ CompatGeckoMobile("48.0")}} | {{CompatUnknown}} | {{CompatUnknown}} | {{CompatUnknown}} | {{CompatUnknown}} |
composite , iterationComposite , and spacing options |
{{CompatNo}} | {{CompatNo}} | {{CompatNo}} | {{CompatNo}} | {{CompatNo}} | {{CompatNo}} | {{CompatNo}} | {{CompatNo}} |
See also
- Web Animations API
- Inherits from {{domxref("AnimationEffectReadOnly")}}.
- {{domxref("KeyframeEffect")}} inherits from it.
- Can be played with an {{domxref("Animation")}} object.