animation-composition

Baseline 2023 (Chrome 112, Safari 16, Firefox 115).

Chrome 112Edge 112Safari 16Firefox 115

Steuert, wie mehrere Animationen auf derselben Property kombiniert werden: `add` oder `accumulate` statt des Defaults `replace`. Lässt eine Wippanimation auf einer Rotation reiten, ohne dass eine die andere überschreibt.

CSS

.fx-020 {
  width: 60px;
  height: 60px;
  border-radius: 12px;
  background: #ec4899;
  margin: 30px;
    animation: fx-020-spin 3s linear infinite,fx-020-bob 1s ease-in-out infinite alternate;
    animation-composition: replace,add
}
@keyframes fx-020-spin {
  to {
    transform: rotate(360deg)
  }
}
@keyframes fx-020-bob {
  to {
    transform: translateY(-20px)
  }
}
@media (prefers-reduced-motion: reduce) {
  .fx-020, .fx-020 * { animation: none; transition: none; }
}

HTML

<div class="fx-020"></div>

Fallback: Ohne ersetzt die letzte Animation die erste (nur das Wippen spielt). Akzeptable Degradierung.

Quelle: developer.mozilla.org/en-US/docs/Web/CSS/animation-composition

Prompt

Wenn du mehrere Keyframe-Animationen auf `transform` (oder einer anderen einzelnen Property) stapelst, setze `animation-composition: replace, add` (ein Wert pro Animation), damit spätere Animationen zu den früheren addiert werden statt sie zu überschreiben. Alternativ nutze die einzelnen Properties `translate`/`rotate`/`scale`, jede mit eigener Animation.