In this blog, we'll dive into the world of CSS animations and explore how to handle multiple animations affecting the same property of an element using the animation-composition property. Get ready to transform your animations from chaotic clashes to harmonious symphonies!

animation-composition

There are 3 possible values of animation-composition - replace, add and accumulate,

1. replace - it replaces the current property value with the value present at 0% of the animation.

2. add - it appends the value present at 0% to the current value of the property.

3. accumulate - it combines the property value with the current value and then applies it to the element.

It can be best understood with an example

let us suppose we have a container with a transform value translateX(50px) rotateY(45deg) and we have the following animation added to it

@keyframes move {
  0% {
    transform: translateY(50px);
  }
  100% {
    transform: translateY(100px);
  }
}

then in the case of

1. replace - replaces the current value of the property i.e; translateX(50px) rotateY(45deg) -> translateY(50px)

2. add - appends to the current value i.e; translateX(50px) rotateY(45deg) -> translateX(50px) rotateY(45deg) translateY(50px)

3. accumulate - adds up the value i.e; translateX(50px) rotateY(45deg) -> translateX(50px) translateY(50px) rotateY(45deg)

the difference between add and accumulate is that "add" applies the animation style after the current style is applied whereas "accumulate" combines the value and then applied to the element.

Play with the following playground to understand it completely

for more information refer to this article

Thanks for reading.