The animation-composition property

How have I never heard of the animation-composition property before? I just spotted it over on Manuel Matuzović’s blog:

CSS animations can be composited in three ways: replace, add, and accumulate. The animation-composition property allows you to switch between them.

Huh! So you can effectively add, replace, or combine animations together which is something I’ve never thought about before! I had never even thought much about the default behavior too, which replaces an animation on an element, so that in the CSS below the .element will only move 100px...

.element {
  animation: move 2s infinite;
  transform: translateX(10px);
}

@keyframes move {
  to {
    transform: translateX(100px);
  }
}

But what if you wanted these properties to stack, so that you have 100 + 10 here? That’s what animation-composition is for and you can use it like this:

.element {
  animation: move 2s infinite;
  transform: translateX(10px);
  animation-composition: add;
}

@keyframes move {
	to {
		transform: translateX(100px);
	}
}

Huh! Very neat indeed!

The funny thing is that when I saw this property this morning my first thought was: why on earth do we need this? I couldn’t imagine scenarios where this would help me out of tricky problems or help me with animation work (which, admittedly, is very rare for me). And then later in the afternoon I was working with an engineer and realized that we could use this animation-composition stuff without writing a bunch of complicated JavaScript!

Oh and make sure to check out Bramus’ post combining multiple animation effects, too.