KeyframeEffect: iterationComposite property

Limited availability

This feature is not Baseline because it does not work in some of the most widely-used browsers.

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

Value

One of the following:

replace

The keyframeEffect value produced is independent of the current iteration.

accumulate

Subsequent iterations of the keyframeEffect build on the final value of the previous iteration.

Specifications

Specification
Web Animations Module Level 2
# dom-keyframeeffect-iterationcomposite

Browser compatibility

desktop mobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
iterationComposite
Chrome – No support
Chrome
footnote
footnote See bug 41133485
Edge – No support
Edge
footnote
footnote See bug 41133485
Firefox – Full support
Firefox 80 (Release date: 2020-08-25)
footnote Full support
Opera – No support
Opera
footnote
footnote See bug 41133485
Safari – Full support
Safari 16.4 (Release date: 2023-03-27)
footnote Full support
Chrome Android – No support
Chrome Android
footnote
footnote See bug 41133485
Firefox for Android – Full support
Firefox for Android 80 (Release date: 2020-08-31)
footnote Full support
Opera Android – No support
Opera Android
footnote
footnote See bug 41133485
Safari on iOS – Full support
Safari on iOS 16.4 (Release date: 2023-03-27)
footnote Full support
Samsung Internet – No support
Samsung Internet
footnote
footnote See bug 41133485
WebView Android – No support
WebView Android
footnote
footnote See bug 41133485
WebView on iOS – Full support
WebView on iOS 16.4 (Release date: 2023-03-27)
footnote Full support

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
No support
No support
See implementation notes.

See also