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

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

Note: For KeyframeEffect, this property is both a getter and a setter. For KeyframeEffectReadOnly, it is read-only.


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

The keyframeEffect overrides the underlying value it is combined with:  blur(2) replaces blur(3).
The keyframeEffect is added to the underlying value with which it is combined (aka additive):  blur(2) blur(3).
The keyframeEffect is accumulated on to the underlying value:  blur(5).


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

Browser compatibility

FeatureChromeEdgeFirefoxInternet ExplorerOperaSafari
Basic support Yes ? No No No No
FeatureAndroid webviewChrome for AndroidEdge mobileFirefox for AndroidOpera AndroidiOS SafariSamsung Internet
Basic support Yes Yes ? No No No Yes

See also

Document Tags and Contributors

Contributors to this page: fscholz, rachelnabors, chrisdavidmills, Nexii
Last updated by: fscholz,