KeyframeEffect: composite property

{{ APIRef("Web Animations") }}

The composite property of a {{domxref("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

{{Specifications}}

Browser compatibility

{{Compat}}

See also

• Web Animations API
• Property of {{domxref("KeyframeEffect")}} objects
• {{Glossary("Composite operation")}}