KeyframeEffectReadOnly

The 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 KeyframeEffect.

Constructor

KeyframeEffectReadOnly.KeyframeEffectReadOnly()

Returns a new KeyframeEffectReadOnly object instance.

Properties

This interface inherits some of its methods and properties from its parent AnimationEffectReadOnly.

KeyframeEffectReadOnly.target Read only

The element or pseudo-element being animated by this object. This may be null for animations that do not target a specific element.

AnimationEffectReadOnly.timing Read only

The 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.

KeyframeEffectReadOnly.composite Read only

The composite operation property for resolving the property value changes between this and other keyframe effects.

KeyframeEffectReadOnly.iterationComposite Read only

The iteration composite operation for resolving the property value changes of this keyframe effect.

KeyframeEffectReadOnly.spacing Read only

The temporal spacing of the keyframe effect's iterations

Methods

KeyframeEffectReadOnly.getKeyframes() Read only

Returns the computed keyframes that make up this effect along with their computed keyframe offsets.

AnimationEffectReadOnly.getComputedTiming() Read only

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

Browser compatibility

See also

• Web Animations API
• Inherits from AnimationEffectReadOnly.
• KeyframeEffect inherits from it.
• Can be played with an Animation object.