📌 What Is animation-composition?

The animation-composition property controls how multiple animations applied to the same element combine their effects. Instead of one animation overriding the other, you choose whether they should:

🧩 Basic Syntax

animation-composition: replace | add | accumulate;

🎯 Values Explained

🧪 Example Keyframes

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

@keyframes rotate {
  to { transform: rotate(45deg); }
}

🎬 Example 1: replace (Default)

.box {
  animation-name: moveRight, rotate;
  animation-duration: 1s, 1s;
  animation-composition: replace;
}

✔ Only the rotate animation applies because it replaces moveRight.

🎬 Example 2: add (Combine Animations)

.box {
  animation-name: moveRight, rotate;
  animation-duration: 1s, 1s;
  animation-composition: add;
}

✔ Final effect = translate + rotate happening together
✔ Perfect for combining movement, scaling, and rotation

🎬 Example 3: accumulate (Build Over Time)

.box {
  animation-name: moveRight;
  animation-duration: 1s;
  animation-iteration-count: 5;
  animation-composition: accumulate;
}

✔ Each iteration adds 100px to the previous movement
✔ Final movement after 5 iterations = 500px

🎨 Visual Example: Move + Scale + Rotate Combined

@keyframes scaleUp {
  to { transform: scale(1.3); }
}

.shape {
  animation-name: moveRight, scaleUp, rotate;
  animation-duration: 1s, 1s, 1s;
  animation-composition: add;
}

✔ Move + Scale + Rotate all apply simultaneously

✨ Using animation-composition with Shorthand

animation: moveRight 1s, rotate 1s;
animation-composition: add;

🧠 Best Practices

🔍 Debugging Tips

🌐 Browser Support

🔗 Helpful Resources