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.
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)
replacesblur(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
BCD tables only load in the browser
See also
- Web Animations API
- Property of
KeyframeEffect
objects - Composite operation