This is an experimental technology
Check the Browser compatibility table carefully before using this in production.

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.

Note: The animations created with KeyframeEffectReadOnly are immutable. To create animations you can change with JavaScript on the fly, try KeyframeEffect instead.


Returns a new KeyframeEffectReadOnly object 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 AnimationEffectReadOnly. 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.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.


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.

// Inspect her timing object. 

// See what her current timing values are right now. 
// How do they differ from the above?


Specification Status Comment
Web Animations
The definition of 'keyframeEffectReadOnly' in that specification.
Working Draft Editor's draft.

Browser compatibility

FeatureChromeEdgeFirefoxInternet ExplorerOperaSafari
Basic support Yes ? Yes No No No
KeyframeEffectReadOnly constructor Yes ? Yes No No No
composite Yes ? No No No No
iterationComposite No No No No No No
getKeyFrames No No No No No ?
target No No No No No No
FeatureAndroid webviewChrome for AndroidEdge mobileFirefox for AndroidOpera AndroidiOS SafariSamsung Internet
Basic support Yes Yes ? Yes No No Yes
KeyframeEffectReadOnly constructor Yes Yes ? Yes No No Yes
composite Yes Yes ? No No No Yes
iterationComposite No No No No No No No
getKeyFrames ? No No No No ? No
target No No No No No No No

See also

Document Tags and Contributors

Contributors to this page: ngyikp, fscholz, chrisdavidmills, xfq, birtles, suzyh, rachelnabors
Last updated by: ngyikp,