animation-composition

The animation-composition CSS property specifies the composite operation to use when multiple animations affect the same property simultaneously.

Each property that is targeted by the @keyframes at-rule is associated with an effect stack. The value of the effect stack is calculated by combining the underlying value of a property in a CSS style rule with the effect value of that property in the keyframe. The animation-composition property helps to specify how to combine the underlying value with the effect value.

For example, in the CSS below, blur(5px) is the underlying value, and blur(10px) is the effect value. The animation-composition property specifies the operation to perform to produce the final effect value after compositing the effect of the underlying value and the effect value.

Syntax example: animation-composition: replace;