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)
.
-
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)
.