KeyframeEffect.composite

Experimental: This is an experimental technology
Check the Browser compatibility table carefully before using this in production.

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

Syntax

// getting
var compositeEnumeration = keyframeEffect.composite;

// setting
keyframeEffect.composite = 'accumulate';

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

Browser compatibility

Desktop Mobile
Chrome Edge Firefox Internet Explorer Opera Safari WebView Android Chrome Android Firefox for Android Opera Android Safari on IOS Samsung Internet
composite
84
84
80
63-79
No
71
No
84
84
80
63-79
60
No
14.0

See also

© 2005–2021 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/API/KeyframeEffect/composite