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!

☕ Buy a Coffee

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

HTML

<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>

CSS

.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);
  }
}

Result

Editor