animation-composition
Determines how the browser should mix multiple animations targeting the same property. You can either replace the previous value, add to it, or accumulate it (useful for stacking transforms).
Usage example
.box {
/* Adds the second transform to the first instead of replacing it */
animation-composition: add;
}Initial value
replace
Inherited
No
Applies to
allElements
Animation type
notAnimatable
animation-composition Browser Support
Widely available Since 2023 91% global usage
This feature is well established and works across many devices and browser versions. It has been available across browsers since 2023.
Safe to use without fallbacks.
112+
115+
16+
112+