We're looking for a user researcher to understand the needs of developers and designers. Is this you or someone you know? Check out the post: https://mzl.la/2IGzdXS


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

The iterationComposite property of a KeyframeEffectReadOnly or a KeyframeEffect resolves how the the animation's property value changes accumulate or override each other upon each of the animation's iterations.

Note: For KeyframeEffect, this property is both a getter and a setter. For KeyframeEffectReadOnly, it is read-only.


// getting
var iterationCompositeEnumeration = keyframeEffect.iterationComposite;

// setting
keyframeEffect.iterationComposite = 'replace';


The keyframeEffect value produced is independent of the current iteration.
Subsequent iterations of the keyframeEffect build on the final value of the previous iteration.


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

Browser compatibility

FeatureChromeEdgeFirefoxInternet ExplorerOperaSafari
Basic support No No No No No No
FeatureAndroid webviewChrome for AndroidEdge mobileFirefox for AndroidOpera AndroidiOS SafariSamsung Internet
Basic support No No No No No No No

See also

Document Tags and Contributors

Contributors to this page: fscholz, hiikezoe, birtles, rachelnabors, chrisdavidmills
Last updated by: fscholz,