W3cubDocs

KeyframeEffect.composite

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.

// getting
var compositeEnumeration = keyframeEffect.composite;

// setting
keyframeEffect.composite = 'accumulate';

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

Specification	Status	Comment
Web Animations The definition of 'KeyframeEffect.composite' in that specification.	Working Draft	Editor's draft.

	Desktop
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari
Basic support	?	?	63 Disabled 63 Disabled Disabled From version 63: this feature is behind the `dom.animations-api.compositing.enabled` preference (needs to be set to `true`). To change preferences in Firefox, visit about:config.	?	?	?

	Mobile
	Android webview	Chrome for Android	Edge Mobile	Firefox for Android	Opera for Android	iOS Safari	Samsung Internet
Basic support	?	?	?	63 Disabled 63 Disabled Disabled From version 63: this feature is behind the `dom.animations-api.compositing.enabled` preference (needs to be set to `true`). To change preferences in Firefox, visit about:config.	?	?	?