CSS Transitions und Animationen: Bewegung im Web gezielt einsetzen

Ein Button, der beim Überfahren sanft die Farbe wechselt. Ein Menü, das flüssig aufklappt. Ein Ladeindikator, der sich dreht. All das sind kleine Bewegungen, die eine Website lebendiger und angenehmer wirken lassen – und du brauchst dafür kein JavaScript. Modernes CSS bringt zwei mächtige Werkzeuge mit: Transitions für sanfte Übergänge zwischen zwei Zuständen und Animationen für komplexe, mehrstufige Bewegungsabläufe. In diesem Beitrag lernst du, wann du welches Werkzeug nutzt, worauf du bei der Performance achten musst und wie du Nutzer respektierst, die weniger Bewegung möchten.

Transitions: Sanfte Übergänge zwischen zwei Zuständen

Eine transition sagt dem Browser: "Wenn sich diese Eigenschaft ändert, springe nicht abrupt zum neuen Wert, sondern gleite über eine gewisse Zeit dorthin." Der Klassiker ist der Hover-Effekt. Ohne Transition wechselt die Farbe schlagartig, mit Transition wird der Übergang weich.

.button {
  background-color: #2563eb;
  color: white;
  padding: 0.75rem 1.5rem;
  border-radius: 8px;
  /* Eigenschaft, Dauer, Timing-Funktion */
  transition: background-color 0.3s ease;
}

.button:hover {
  background-color: #1e40af;
}

Die Kurzschreibweise transition fasst mehrere Angaben zusammen: welche Eigenschaft animiert wird, wie lange es dauert, mit welcher Timing-Funktion und optional nach welcher Verzögerung. Du kannst auch mehrere Eigenschaften gleichzeitig übergehen lassen, indem du sie mit Komma trennst:

.card {
  transform: translateY(0);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.card:hover {
  transform: translateY(-6px);
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.15);
}

Ein wichtiger Punkt: Die transition gehört auf den Grundzustand, nicht nur auf :hover. So läuft der Übergang in beide Richtungen weich ab – hinein und heraus.

Timing-Funktionen: Wie sich Bewegung anfühlt

Die Timing-Funktion bestimmt das Tempo über die Dauer hinweg. Eine lineare Bewegung wirkt mechanisch, während ease oder ease-in-out natürlicher erscheinen, weil sie langsam starten und enden. Die gängigen Schlüsselwörter sind linear, ease, ease-in, ease-out und ease-in-out.

.linear   { transition: transform 0.4s linear; }
.smooth   { transition: transform 0.4s ease-in-out; }

/* Volle Kontrolle mit einer eigenen Bézier-Kurve */
.custom {
  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

Mit cubic-bezier() definierst du eine eigene Kurve. Werte über 1 beim zweiten Kontrollpunkt erzeugen einen kleinen "Überschwinger" – das fühlt sich verspielt und federnd an. Zum Ausprobieren lohnt sich der Bézier-Editor in den Entwicklertools des Browsers.

Keyframe-Animationen: Mehr als zwei Zustände

Transitions können nur zwischen genau zwei Zuständen wechseln und brauchen einen Auslöser wie :hover. Sobald du mehrere Zwischenschritte brauchst oder eine Bewegung automatisch und dauerhaft laufen soll, kommen @keyframes ins Spiel. Du definierst einzelne Punkte im Ablauf – über Prozentwerte oder die Schlüsselwörter from und to.

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

.notification {
  /* Name, Dauer, Timing, Wiederholung */
  animation: pulse 1.5s ease-in-out infinite;
}

Die animation-Kurzschreibweise nimmt unter anderem den Namen der Keyframes, die Dauer, die Timing-Funktion und die Anzahl der Wiederholungen (infinite für endlos) auf. Ein klassisches Beispiel ist der drehende Ladespinner:

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

.spinner {
  width: 32px;
  height: 32px;
  border: 4px solid #e5e7eb;
  border-top-color: #2563eb;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

Nützliche Zusatzeigenschaften: animation-delay verzögert den Start, animation-direction: alternate lässt die Animation abwechselnd vor- und rückwärts laufen, und animation-fill-mode: forwards sorgt dafür, dass der letzte Keyframe-Zustand nach dem Ende erhalten bleibt.

Performance: Nur transform und opacity animieren

Nicht jede Eigenschaft ist gleich günstig zu animieren. Wenn du width, height, top oder margin animierst, muss der Browser das Layout neu berechnen – das nennt sich Reflow und kann zu ruckeliger Bewegung führen. Deutlich flüssiger sind transform (für Verschieben, Skalieren, Drehen) und opacity, weil der Browser sie auf der Grafikkarte verarbeiten kann, ohne das Layout anzufassen.

/* Weniger performant: löst Reflow aus */
.box-slow {
  transition: margin-left 0.3s ease;
}
.box-slow:hover { margin-left: 40px; }

/* Empfohlen: läuft flüssig auf der GPU */
.box-fast {
  transition: transform 0.3s ease;
}
.box-fast:hover { transform: translateX(40px); }

Die Faustregel lautet: Wann immer es geht, drücke Bewegung über transform und Sichtbarkeit über opacity aus. Deine Animationen laufen dann auch auf schwächeren Geräten geschmeidig.

Barrierefreiheit: Bewegung respektvoll einsetzen

Manche Menschen reagieren empfindlich auf Bewegung – von Ablenkung bis hin zu Übelkeit bei starken Effekten. Betriebssysteme bieten dafür eine Einstellung "Bewegung reduzieren", die du in CSS über die Media Query prefers-reduced-motion abfragen kannst. Ein guter Umgang ist, Animationen standardmäßig zu erlauben und sie für diese Nutzergruppe zurückzunehmen.

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

Damit deaktivierst du übermäßige Bewegung, ohne die Funktionalität zu verlieren. Setze Animationen außerdem gezielt ein: Sie sollen Aufmerksamkeit lenken oder Zustandswechsel verdeutlichen, nicht bloß dekorieren. Kurze Dauern (meist zwischen 150 und 400 Millisekunden) wirken bei Interface-Übergängen am besten.

Fazit

Mit transition gestaltest du sanfte Übergänge zwischen zwei Zuständen, mit @keyframes und animation baust du komplexe, mehrstufige oder dauerhafte Bewegungen – ganz ohne JavaScript. Achte darauf, bevorzugt transform und opacity zu animieren, damit alles flüssig läuft, und nimm über prefers-reduced-motion Rücksicht auf empfindliche Nutzer. Fang mit kleinen Hover-Effekten an, experimentiere mit Timing-Funktionen im Browser-DevTool und du wirst schnell ein Gefühl dafür entwickeln, wie viel eine gut dosierte Bewegung zur Nutzererfahrung beiträgt.