CSS-Animation: Leitfaden zu transition und keyframes

CSS-Animation ist das praktischste Werkzeug, um ein statisches Dokument in ein lebendiges, flüssiges Erlebnis zu verwandeln. Ohne eine einzige Zeile JavaScript zu schreiben, kannst du Schaltflächen sanft die Farbe wechseln lassen, Karten ins Bild gleiten lassen und Ladeanzeigen rotieren lassen — allein mit Stilregeln. In diesem Leitfaden behandle ich die beiden Kernmechanismen getrennt: transition, das bei Zustandsänderungen greift, und @keyframes für getaktete, mehrstufige Bewegung.

transition: flüssige Übergänge zwischen Zuständen

transition füllt automatisch die Zwischenschritte aus, sobald sich der Wert einer Eigenschaft ändert. Wenn ein :hover, ein :focus oder eine per JavaScript hinzugefügte Klasse eine Farbe oder Größe ändert, siehst du also einen sanften Übergang statt eines harten Sprungs. Es hat vier Kernbestandteile: welche Eigenschaft, über welche Dauer, mit welcher Beschleunigungskurve und nach welcher Verzögerung.

.btn {
  background: #4f46e5;
  transform: scale(1);
  transition: background 200ms ease, transform 200ms ease;
}

.btn:hover {
  background: #6366f1;
  transform: scale(1.05);
}

Hier nimmt die Kurzschreibweise transition der Reihe nach die Eigenschaft, die Dauer und die Timing-Funktion. Du kannst mehrere Eigenschaften durch Kommas getrennt auflisten. Benenne nach Möglichkeit die genauen Eigenschaften, statt all zu verwenden; das hält die Performance vorhersehbar und verhindert, dass ungewollte Eigenschaften versehentlich animiert werden.

Timing-Funktionen (Easing)

Ob sich eine Bewegung natürlich anfühlt, hängt stark von ihrer Geschwindigkeitskurve ab. In der realen Welt starten und stoppen Objekte nicht abrupt; sie beschleunigen und verlangsamen sich. CSS bietet dafür fertige Schlüsselwörter und eigene Kurven:

ease — der Standard; eine ausgewogene Kurve, die sanft beginnt und endet.
linear — konstante Geschwindigkeit; ideal für rotierende Ladeanzeigen.
ease-out — beginnt schnell, endet langsam; fühlt sich natürlich an für Elemente, die ins Bild kommen.
cubic-bezier(0.34, 1.56, 0.64, 1) — definiert deine eigene Kurve; Werte über 1 erzeugen einen leichten „federnden" Überschwinger.

Für die meisten UI-Mikrointeraktionen fühlen sich Dauern zwischen 150 und 300 ms am natürlichsten an. Zu kurz, und die Änderung bleibt unbemerkt; zu lang, und die Oberfläche wirkt schwerfällig.

@keyframes: mehrstufige Animationen

Eine transition funktioniert nur zwischen zwei Zuständen: einem Anfang und einem Ende. Für mehrstufige Bewegung — ein Element, das erst wächst und dann schrumpft, oder sich endlos dreht — verwendest du @keyframes. Zuerst definierst du eine Folge von Frames, dann wendest du sie mit der Eigenschaft animation auf ein Element an.

@keyframes pulse {
  0%   { transform: scale(1);   opacity: 1; }
  50%  { transform: scale(1.1); opacity: 0.7; }
  100% { transform: scale(1);   opacity: 1; }
}

.badge {
  animation: pulse 1.5s ease-in-out infinite;
}

Prozentwerte stellen Punkte auf der Zeitachse der Animation dar; from und to sind Kurzschreibweisen für 0% und 100%. Die Kurzschreibweise animation nimmt der Reihe nach den Namen, die Dauer, das Easing, die Anzahl der Wiederholungen (infinite für endlos) und die Richtung.

Performance: Was sollte man animieren?

Eine flüssige Animation strebt 60 Bilder pro Sekunde an. Der Schlüssel dazu ist, Eigenschaften zu animieren, die den Browser nicht zwingen, das Seitenlayout neu zu berechnen. transform und opacity werden direkt auf der GPU verarbeitet, ohne das Layout auszulösen; deshalb sollten sie deine Standardwahl sein.

Gut: transform (translate, scale, rotate) und opacity.
Vermeiden: width, height, top, left, margin — Eigenschaften, die bei jedem Frame einen Reflow auslösen.

Um ein Element nach links zu verschieben, verwende zum Beispiel transform: translateX() statt left. Wenn du dem Browser signalisieren möchtest, dass ein Element gleich animiert wird, kannst du will-change: transform; hinzufügen — aber nur, wenn du es wirklich brauchst, denn ein übermäßiger Einsatz verbraucht Speicher.

Barrierefreiheit: die Präferenz für reduzierte Bewegung respektieren

Manche Nutzer stört übermäßige Bewegung, oder sie schalten sie wegen vestibulärer Störungen auf Betriebssystemebene ab. Diese Präferenz mit der Media-Query prefers-reduced-motion zu berücksichtigen, ist gute Praxis:

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

Diese Regel deaktiviert dekorative Animationen wirksam, während die Oberfläche voll funktionsfähig bleibt.

Ein praktisches Beispiel: eine Karte, die nach oben eingeblendet wird

Das folgende Beispiel blendet eine Karte ein, indem es sie leicht von unten nach oben und von transparent zu undurchsichtig bewegt. Da es nur transform und opacity verwendet, bleibt es flüssig.

@keyframes fade-up {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}

.card {
  animation: fade-up 400ms ease-out both;
}

Der Wert both bedeutet, dass die Animation ihren Anfangszustand vor dem Start und ihren Endzustand nach dem Ende beibehält, sodass die Karte ohne Flackern an Ort und Stelle bleibt.

Häufige Fragen

Was ist der Unterschied zwischen transition und animation?

transition funktioniert nur zwischen zwei Zuständen, meist als Reaktion auf eine Interaktion (Hover, Fokus, Klassenwechsel). animation, definiert mit @keyframes, beschreibt mehrstufige Bewegung, die von selbst starten und in einer Schleife laufen kann.

Warum ruckeln meine Animationen?

Der übliche Übeltäter ist das Animieren von Eigenschaften wie width, top oder margin, die bei jedem Frame eine Layout-Neuberechnung erzwingen. Der Wechsel zu transform und opacity behebt das meiste Ruckeln.

Kann ich eine Animation beim Scrollen ohne JavaScript auslösen?

Ja. In modernen Browsern sind scrollgesteuerte Animationen mit CSS animation-timeline: view(); möglich. Für breitere Browserunterstützung bleibt das Hinzufügen einer Klasse über IntersectionObserver der zuverlässigste Ansatz.

Möchtest du deiner Oberfläche ein poliertes, flüssiges Gefühl verleihen? Wenn du Hilfe bei performanten CSS-Animationen und Mikrointeraktionen brauchst, nimm Kontakt mit mir auf.