CSS animation-composition Property

If this site has been useful, we’d love your support! Running this site takes time and resources, and every small contribution helps us keep creating valuable content. Consider buying us a coffee to keep things going strong!

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
Edge Chrome Firefox Opera Safari
1121121159816
Tablets / Mobile
Chrome Firefox Opera Safari Samsung Webview
112115x16x112

Last updated by CSSPortal on: 31st December 2023