animation-composition verstehen: Additive Animationen ohne Überschreiben

1. Was animation-composition überhaupt löst

Sobald zwei separate CSS-Animationen dieselbe Eigenschaft ansprechen, etwa transform für einen Hover-Effekt und transform für eine parallel laufende Idle-Schwebeanimation, gewinnt standardmäßig nur eine der beiden. Der Browser ersetzt den Wert der einen Animation vollständig durch den Wert der anderen, statt beide zu kombinieren. Dieses Verhalten heißt replace und ist der Default-Wert von animation-composition, genau deshalb wirken viele kombinierte Hover- und Idle-Effekte in der Praxis ruckelig oder brechen sichtbar ab, sobald der Nutzer während der Idle-Animation über das Element fährt.

Vor animation-composition musste dieses Problem manuell umgangen werden, meist durch verschachtelte Wrapper-Elemente, bei denen jede Animation ein eigenes Element bekommt, damit sich die transform-Werte nicht gegenseitig ins Gehege kommen. Diese Lösung funktioniert, erzeugt aber zusätzliche, semantisch bedeutungslose DOM-Knoten nur für Animationszwecke, was weder elegant noch besonders wartbar ist.

Die Eigenschaft animation-composition löst dieses Problem direkt an der Wurzel: statt eine Animation die andere überschreiben zu lassen, können mehrere Animationen auf derselben Eigenschaft additiv zusammengerechnet werden. Das entspricht viel eher der Intuition, die die meisten Entwickler ohnehin von Animationen haben, nämlich dass zwei unabhängige Bewegungen sich addieren sollten, statt dass die eine die andere unsichtbar macht.

2. Die drei Werte: replace, add und accumulate

animation-composition kennt drei Werte, die jeweils ein unterschiedliches Zusammenspiel mehrerer Animationen definieren. replace ist der bereits beschriebene Standard: der Wert der später deklarierten oder höher priorisierten Animation ersetzt den vorherigen vollständig. add hängt die Transformation einer Animation an die bereits vorhandene an, mathematisch als Matrix-Multiplikation der Transform-Werte, was sich besonders für Transform-Eigenschaften wie translate, rotate oder scale anbietet.

Der dritte Wert, accumulate, verhält sich ähnlich wie add, unterscheidet sich aber in der Behandlung von Wiederholungen: bei mehrfachen Durchläufen derselben Animation summieren sich die Endwerte statt bei jeder Wiederholung wieder auf null zurückzuspringen. Für die meisten praktischen Fälle einer additiven Kombination unterschiedlicher Animationen ist add die naheliegendere Wahl, accumulate eignet sich besonders für Animationen, die sich fortlaufend akkumulieren sollen, etwa eine kontinuierlich anwachsende Rotation über mehrere Interaktionen hinweg.

/* Default behavior: the second animation silently overrides the first */
.card {
  animation: idle-float 3s ease-in-out infinite;
}
.card:hover {
  animation: hover-lift 0.3s ease-out both;
  /* animation-composition: replace; (implicit default) */
}

@keyframes idle-float {
  50% { transform: translateY(-6px); }
}
@keyframes hover-lift {
  to { transform: translateY(-12px) scale(1.03); }
}

Im obigen Beispiel verschwindet die sanfte Idle-Schwebebewegung sofort, sobald der Hover-Zustand aktiviert wird, weil replace als Standardverhalten greift. Genau dieses Verhalten ändert sich, sobald animation-composition: add; explizit gesetzt wird.

3. Additive Animationen für unabhängige Transform-Achsen

Der überzeugendste Anwendungsfall für animation-composition: add; sind unabhängige Bewegungsachsen, die konzeptionell nichts miteinander zu tun haben, aber zufällig dieselbe CSS-Eigenschaft nutzen. Eine sanfte Idle-Schwebebewegung auf der Y-Achse und ein Hover-bedingtes Hochheben auf derselben Y-Achse sind konzeptionell zwei unterschiedliche Bewegungen, technisch aber beide Teil derselben transform-Eigenschaft.

Mit animation-composition: add; auf der zweiten Animation werden beide Transformationen addiert, statt dass die zweite die erste ersetzt. Das Element schwebt weiterhin sanft, während gleichzeitig der Hover-Effekt oben drauf addiert wird, ein Verhalten, das ohne animation-composition nur mit verschachtelten Wrapper-Elementen erreichbar wäre.

/* Both animations coexist: idle float stays active, hover adds on top */
.card {
  animation: idle-float 3s ease-in-out infinite;
}
.card:hover {
  animation: hover-lift 0.3s ease-out both;
  animation-composition: add;
}

@keyframes idle-float {
  50% { transform: translateY(-6px); }
}
@keyframes hover-lift {
  to { transform: translateY(-12px) scale(1.03); }
}

Wichtig ist dabei die Reihenfolge der Transform-Funktionen: add kombiniert die Matrizen in der Reihenfolge, in der die Animationen im Composite-Stack liegen, was bei komplexeren Kombinationen aus Rotation und Translation zu unerwarteten Ergebnissen führen kann, wenn die Reihenfolge nicht bewusst gewählt wurde. Ein kurzer visueller Test in den DevTools klärt in der Regel schnell, ob die addierte Bewegung wie erwartet aussieht.

4. Mehrere Animationen auf derselben Eigenschaft kombinieren

Über zwei Animationen hinaus lässt sich animation-composition auch für drei oder mehr gleichzeitig laufende Animationen auf derselben Eigenschaft nutzen, solange jede zusätzliche Animation ihren eigenen, unabhängigen Beitrag zur Gesamttransformation leisten soll. Ein typisches Muster: eine kontinuierliche Grundbewegung, eine zustandsabhängige Modifikation und eine kurzzeitige Reaktion auf eine Nutzerinteraktion, alle drei gleichzeitig auf transform.

Die Kombinierbarkeit mehrerer additiver Animationen macht komplexe, choreografierte Bewegungsabläufe möglich, die früher entweder eine einzige, monolithische @keyframes-Regel mit allen kombinierten Zuständen erforderten, oder eben mehrere verschachtelte DOM-Elemente. Beide Alternativen sind deutlich schwerer zu warten als drei unabhängig deklarierte, additiv komponierte Animationen.

/* Three independent animations, all additive on the same property */
.orb {
  animation:
    drift 6s ease-in-out infinite,
    pulse-scale 2s ease-in-out infinite;
  animation-composition: add, add;
}
.orb.is-active {
  animation: active-boost 0.4s ease-out both;
  animation-composition: add;
}

@keyframes drift {
  50% { transform: translateX(20px); }
}
@keyframes pulse-scale {
  50% { transform: scale(1.08); }
}
@keyframes active-boost {
  to { transform: translateY(-10px); }
}

5. accumulate im Detail: Endwerte statt Nullpunkt

Der Unterschied zwischen add und accumulate zeigt sich am deutlichsten bei mehrfach wiederholten Animationen. Mit add startet jeder Wiederholungszyklus wieder additiv bei dem Wert, den die anderen aktiven Animationen zu diesem Zeitpunkt liefern, unabhängig davon, wie oft der Zyklus bereits durchlaufen wurde. Mit accumulate dagegen summieren sich die Endwerte über mehrere Wiederholungen hinweg, sodass eine Rotation von 0 bis 90 Grad bei drei Wiederholungen effektiv bei 270 Grad landet, statt bei jedem Zyklus wieder bei 90 Grad zu enden.

Dieses Verhalten eignet sich hervorragend für Effekte, die sich über mehrere Interaktionen hinweg fortlaufend aufbauen sollen, etwa ein Icon, das sich bei jedem Klick ein Stück weiterdreht, statt bei jedem Klick wieder von vorn zu beginnen. accumulate ist damit die richtige Wahl für kumulative Zustände, während add für die Kombination konzeptionell unabhängiger, aber parallel laufender Bewegungen gedacht ist.

/* accumulate: each click adds another full rotation cycle */
.spinner-icon {
  animation: none;
}
.spinner-icon.clicked {
  animation: quarter-turn 0.3s ease-out;
  animation-composition: accumulate;
}

@keyframes quarter-turn {
  to { transform: rotate(90deg); }
}

6. Praxisbeispiel: Hover- und Scroll-Animation gleichzeitig

Ein besonders praxisrelevantes Szenario kombiniert eine scroll-gekoppelte Animation mit einer Hover-Interaktion auf demselben Element, etwa eine Produktkarte, die sich beim Scrollen sanft ins Bild schiebt und gleichzeitig auf Hover reagieren soll. Ohne animation-composition würde die Hover-Animation die Scroll-Position-Transformation vollständig überschreiben, was zu einem sichtbaren Sprung führt, sobald der Nutzer während des Scrollens über die Karte fährt.

Mit animation-composition: add; auf der Hover-Animation bleibt die Scroll-Transformation vollständig erhalten, während der Hover-Effekt additiv oben drauf wirkt. Das Ergebnis ist ein Übergang ohne sichtbaren Sprung, weil beide Bewegungen, die scroll-getriebene und die interaktionsgetriebene, tatsächlich gleichzeitig und unabhängig voneinander berechnet werden.

.product-card {
  view-timeline: --card-view block;
  animation: card-reveal linear both;
  animation-timeline: --card-view;
  animation-range: entry 0% cover 40%;
}
.product-card:hover {
  animation: card-hover-lift 0.25s ease-out both;
  animation-composition: add;
}

@keyframes card-reveal {
  from { transform: translateY(40px); opacity: 0; }
  to   { transform: translateY(0); opacity: 1; }
}
@keyframes card-hover-lift {
  to { transform: translateY(-8px) scale(1.02); }
}

7. Interaktion mit der Web Animations API und composite

Wer Animationen dynamisch über JavaScript mit der Web Animations API steuert, kennt bereits die Option composite in element.animate(), die exakt dieselbe Semantik wie das CSS-Property animation-composition bietet: replace, add und accumulate stehen dort ebenfalls zur Verfügung. Das ist kein Zufall, sondern dieselbe zugrundeliegende Spezifikation, nur mit zwei unterschiedlichen Zugangspunkten, einmal deklarativ über CSS, einmal programmatisch über JavaScript.

Für Projekte, die sowohl deklarative CSS-Animationen als auch dynamisch mit der Web Animations API erzeugte Animationen mischen, ist es wichtig, dieselbe Composite-Strategie konsistent auf beiden Ebenen zu verwenden. Eine CSS-Animation mit animation-composition: add; kombiniert korrekt mit einer JavaScript-Animation, die composite: 'add' setzt, solange beide dieselbe Eigenschaft ansprechen und der Browser die Kombination unterstützt.

// Web Animations API: same composite semantics as animation-composition
element.animate(
  [{ transform: 'translateY(0)' }, { transform: 'translateY(-12px)' }],
  { duration: 300, easing: 'ease-out', composite: 'add', fill: 'both' }
);

8. Browser-Unterstützung und Fallback ohne animation-composition

animation-composition wird von den meisten aktuellen Evergreen-Browsern unterstützt, ist aber im Vergleich zu grundlegenden CSS-Animationseigenschaften jünger und daher in älteren Browser-Versionen nicht verfügbar. Ohne Unterstützung greift automatisch der Default-Wert replace, was in der Praxis bedeutet, dass die spätere Animation die frühere überschreibt, exakt das Verhalten, das man mit add eigentlich vermeiden wollte.

Für Projekte, die breite Browser-Unterstützung benötigen, empfiehlt sich ein bewusster Fallback-Test: läuft die Kombination aus Idle- und Hover-Animation auch ohne animation-composition noch akzeptabel, auch wenn der additive Effekt fehlt? In vielen Fällen ist ein einfacher Sprung zwischen den Zuständen tolerierbar, solange die Kernfunktionalität der Seite nicht beeinträchtigt wird. Für kritischere Fälle bleibt die klassische Wrapper-Element-Lösung als robuster, wenn auch aufwendigerer Fallback bestehen.

9. animation-composition im Vergleich zu manuellem Transform-Merging

Für die Entscheidung, ob animation-composition oder eine klassische, manuelle Lösung mit verschachtelten Elementen zum Einsatz kommen sollte, hilft ein direkter Vergleich der wichtigsten Eigenschaften.

animation-composition gewinnt diesen Vergleich für alle Projekte, die moderne Browser priorisieren können: keine zusätzlichen DOM-Knoten, hohe Wartbarkeit, weil jede Animation unabhängig und lesbar deklariert bleibt. Nur bei zwingender Unterstützung sehr alter Browser bleibt die klassische Wrapper-Lösung die robustere, wenn auch deutlich aufwendigere Alternative.

10. Zusammenfassung

animation-composition löst das lange bestehende Problem konkurrierender Animationen auf derselben CSS-Eigenschaft. Der Standardwert replace lässt spätere Animationen frühere vollständig überschreiben, add kombiniert Transformationen additiv, ideal für konzeptionell unabhängige Bewegungen wie Idle-Schwebe und Hover-Effekt, und accumulate summiert Endwerte über mehrere Wiederholungen hinweg, ideal für kumulative Zustände wie fortlaufende Rotationen.

Die Web Animations API bietet mit der composite-Option dieselbe Semantik programmatisch an, was gemischte CSS- und JavaScript-Animations-Setups konsistent hält. Ohne Browser-Unterstützung fällt animation-composition automatisch auf replace zurück, weshalb ein bewusster Test des Degradationsverhaltens für Projekte mit breiter Browser-Abdeckung sinnvoll bleibt. Gegenüber der klassischen Lösung mit verschachtelten Wrapper-Elementen spart animation-composition DOM-Komplexität und verbessert die Wartbarkeit erheblich.

11. FAQ: animation-composition verstehen