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).
Quick example
.box {
/* Adds the second transform to the first instead of replacing it */
animation-composition: add;
}Quick facts
Initial value
replaceInherited
No
Applies to
all elements
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+