CSS Animationen: @keyframes und die animation-Eigenschaften – Bewegung ohne Auslöser und ohne JavaScript

@keyframes: die Zwischenzustände

@keyframes name definiert Schlüsselbilder in Prozent der Laufzeit; from und to stehen für 0% und 100%. Jedes Schlüsselbild ist ein Block von Deklarationen; zwischen zwei Bildern interpoliert der Browser wie bei einer Transition.

@keyframes pulsieren {
  0%, 100% { transform: scale(1);    opacity: 1; }
  50%      { transform: scale(1.06); opacity: .7; }
}
.marke { animation: pulsieren 1.8s ease-in-out infinite; }

Die animation-Eigenschaften

animation-name wählt die Keyframes, animation-duration die Dauer eines Durchlaufs, animation-timing-function die Zeitkurve, animation-delay die Verzögerung. animation-iteration-count zählt Durchläufe – eine Zahl oder infinite. animation-direction: alternate läuft vor und zurück. animation-fill-mode: forwards lässt das Element im letzten Schlüsselbild stehen, statt zum Ausgangszustand zu springen. animation-play-state: paused hält sie an, etwa beim Schweben.

Animation oder Transition?

Eine Transition ist die richtige Wahl, wenn sich ein Zustand ändert und der Übergang den Wechsel erklären soll: ein Menü klappt auf, eine Farbe wechselt. Eine Animation passt, wenn etwas ohne Auslöser laufen soll – ein Ladeindikator –, wenn es mehr als zwei Zustände gibt, oder wenn es sich wiederholen soll. Beides lässt sich kombinieren; eine Animation, die durch eine Klasse gestartet wird, ist der häufigste Fall.

Leistung und Maß

Auch für Animationen gilt: transform und opacity laufen auf dem Compositor, alles andere kostet Layout oder Zeichnen bei jedem Frame. Eine endlose Animation auf einem großen Element verbraucht Akku, auch wenn niemand hinsieht; animation-play-state oder ein Intersection Observer halten sie an, sobald sie aus dem Sichtfeld ist. Und (prefers-reduced-motion: reduce) gilt für Animationen genauso wie für Transitionen.

Die Kaskade bei Keyframes

Eine Regel innerhalb eines Keyframe-Blocks folgt anderen Gesetzen als eine gewöhnliche. Ein Ausrufezeichen mit dem Vermerk für Vorrang wird darin nicht beachtet – die Deklaration wird vollständig ignoriert. Werden mehrere Blöcke mit demselben Namen definiert, gewinnt der zuletzt notierte vollständig; die Blöcke werden nicht zusammengeführt, wie es bei gleichnamigen Selektoren der Fall wäre. Wer eine Animation nur an einer Stelle ändern will, muss sie deshalb ganz wiederholen.

Innerhalb einer laufenden Animation stehen die Werte aus den Keyframes über allen anderen Deklarationen desselben Elements, ausgenommen solche mit Vorrang. Das erklärt, warum eine gesetzte Farbe während der Animation wirkungslos scheint und in dem Moment greift, in dem die Animation endet. Soll ein Endzustand bestehen bleiben, hält ihn die Füllart nach dem Ende fest – andernfalls springt das Element in den Zustand zurück, der ohne Animation gälte, und dieser Sprung ist eines der häufiger gemeldeten Rätsel bei ersten Animationen.

Anhalten, verzögern, in Stufen laufen lassen

Eine Animation lässt sich anhalten und fortsetzen, ohne sie neu zu starten: Die entsprechende Eigenschaft kennt zwei Werte, und ein Wechsel zwischen ihnen friert die Bewegung an ihrer aktuellen Stelle ein. In Verbindung mit dem Überfahren mit dem Zeiger ergibt das eine Laufschrift, die stehenbleibt, sobald jemand sie lesen will – eine Anforderung, die in den Richtlinien zur Zugänglichkeit ausdrücklich steht, sobald eine Bewegung länger als fünf Sekunden dauert.

Eine negative Verzögerung startet die Animation nicht später, sondern mitten drin: Bei einer Dauer von vier Sekunden und einer Verzögerung von minus einer Sekunde beginnt sie an der Stelle nach einer Sekunde. Damit lassen sich gleichartige Elemente gegeneinander versetzen, ohne für jedes einen eigenen Keyframe-Block zu schreiben. Und die stufige Zeitkurve springt statt zu gleiten – die einfachste Art, eine Bildfolge oder einen blinkenden Textcursor zu bauen, ohne jedes Einzelbild als Zwischenzustand zu notieren.

Von und bis: die Kurzschreibweisen der Zwischenzustände

Ein Keyframe-Block wird über Prozentwerte gegliedert, und für null und hundert Prozent gibt es die beiden Schlüsselwörter am Anfang und am Ende. Beide sind entbehrlich: Fehlt der Anfangszustand, nimmt der Browser den aktuellen Wert des Elements; fehlt der Endzustand, ebenso. Eine Animation, die von der jetzigen Position aus etwas tut und danach wieder dorthin zurückkehrt, braucht deshalb nur einen einzigen Zwischenzustand in der Mitte.

Mehrere Prozentwerte dürfen sich einen Block teilen, was Wiederholungen erspart – ein Zustand bei null, dreißig und hundert Prozent steht einmal da und nicht dreimal. Und Werte müssen nicht in aufsteigender Reihenfolge notiert sein; der Browser sortiert sie. Was nicht geht, ist eine Eigenschaft, die nur in manchen Zwischenzuständen vorkommt: Sie wird dann zwischen den Zuständen, in denen sie steht, berechnet und außerhalb davon nicht angefasst, was zu Sprüngen an unerwarteten Stellen führt.

Scroll-getriebene Animationen

Seit 2023 kann eine Animation statt an der Zeit am Scrollen hängen: animation-timeline: scroll() bindet sie an die Scrollposition des Dokuments, view() an die Sichtbarkeit des Elements selbst. Fortschrittsbalken und Einblendeffekte kommen so ohne JavaScript aus. Browser ohne Unterstützung zeigen den Endzustand, wenn die Deklaration in @supports (animation-timeline: view()) steht.

Häufige Fragen