KeyframeEffect: composite property

The composite property of a KeyframeEffect resolves how an element's animation impacts its underlying property values.

Value

To understand these values, take the example of a keyframeEffect value of blur(2) working on an underlying property value of blur(3).

replace

The keyframeEffect overrides the underlying value it is combined with: blur(2) replaces blur(3).

add

The keyframeEffect is added to the underlying value with which it is combined (aka additive): blur(2) blur(3).

accumulate

The keyframeEffect is accumulated on to the underlying value: blur(5).

Specifications

Specification
Web Animations
# dom-keyframeeffect-composite

Browser compatibility

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
composite

Legend

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

Full support
Full support

See also