CSS animation-composition Property
Description
The animation-composition
CSS property specifies the composite operation to use when multiple animations affect the same property simultaneously. This means that you can control how the effects of the different animations are combined to produce the final result. The default behavior is for the effect value of the most recent animation to replace the effect value of any previous animations. This is known as the replace
composite operation. However, you can also use the add
and accumulate
composite operations to combine the effect values of multiple animations in different ways. The add
composite operation adds the effect values of all active animations to the underlying value of the property. The accumulate
composite operation combines the effect values of all active animations in a more complex way, taking into account the order in which the animations were applied.
- Initial value
- replace
- Applies to
- all elements
- Inherited
- no
- Computed value
- as specified
- Animatable
- no
- JavaScript syntax
- object.style.animationComposition
Syntax
animation-delay: replace | add | accumulate
Values
- replaceThe effect value overrides the underlying value of the property. This is the default value.
- addThe effect value builds on the underlying value of the property. This operation produces an additive effect. For animation types where the addition operation is not commutative, the order of the operands is the underlying value followed by the effect value.
- accumulateThe effect and underlying values are combined. For animation types where the addition operation is not commutative, the order of the operands is the underlying value followed by the effect value.
Example
<div class="box"></div>
<p>If you miss the animation, just click on either the CSS or HTML tab, then click on the Result tab.</p>
.box {
width: 100px;
height: 100px;
background-color: red;
animation: move-up 1s linear;
animation-composition: add;
}
@keyframes move-up {
from {
transform: translateY(0px);
}
to {
transform: translateY(100px);
}
}
Browser Support
The following table will show you the current browser support for the CSS animation-composition
property.
Desktop | |||||
![]() |
![]() |
![]() |
![]() |
![]() |
|
112 | 112 | 115 | 98 | 16 |
Tablets / Mobile | |||||
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
112 | 115 | x | 16 | x | 112 |
Last updated by CSSPortal on: 31st December 2023