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).
It is documented as part of the CSS Animations specification.
Syntax
/* Usage Example */
.box {
/* Adds the second transform to the first instead of replacing it */
animation-composition: add;
}
/* Global values */
animation-composition: inherit;
animation-composition: initial;
animation-composition: revert;
animation-composition: revert-layer;
animation-composition: unset;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.
112+
115+
16+
112+
Your first month is free
Managed WordPress hosting for faster sites.
Learn more