KeyframeEffect: composite property

Baseline 2022

Newly available

Since September 2022, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.

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


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


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


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


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


Web Animations
# dom-keyframeeffect-composite

Browser compatibility

BCD tables only load in the browser

See also