{{SeeCompatTable}}{{ APIRef("Web Animations API") }}
The KeyframeEffectReadOnly
interface of the Web Animations API lets us create sets of animatable properties and values, called keyframes. These can then be played using the {{domxref("Animation.Animation()")}} constructor.
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.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.
- {{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.
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 | Firefox (Gecko) | Internet Explorer | Opera | Safari (WebKit) |
---|---|---|---|---|---|
Basic support | {{CompatNo}} | {{CompatVersionUnknown}} | {{CompatNo}} | {{CompatNo}} | {{CompatNo}} |
Feature | Android | Android Webview | Chrome for Android | Firefox Mobile (Gecko) | Firefox OS | IE Mobile | Opera Mobile | Safari Mobile |
---|---|---|---|---|---|---|---|---|
Basic support | {{CompatUnknown}} | {{CompatUnknown}} | {{CompatUnknown}} | {{CompatUnknown}} | {{CompatUnknown}} | {{CompatNo}} | {{CompatNo}} | {{CompatNo}} |
See also
- Web Animations API
- Inherits from {{domxref("AnimationEffectReadOnly")}}; {{domxref("KeyframeEffect")}} inherits from them both.