CSS-Animationen & Übergänge: Der ultimative Leitfaden

Animationen sind das Geheimnis, das gute Benutzeroberflächen von großartigen unterscheidet. Ein gut platzierter Übergang lässt Schaltflächen reaktionsfreudig wirken, Seitenaufrufe sich augenblicklich anfühlen und die Navigation mühelos. CSS bietet Ihnen zwei mächtige Animationssysteme: Übergänge für einfache Zustandsänderungen und Keyframe-Animationen für komplexe, mehrstufige Abläufe.

CSS-Übergänge (Transitions)

Übergänge animieren die Veränderung zwischen zwei Zuständen einer CSS-Eigenschaft. Dies wird typischerweise durch Zustände wie :hover, :focus oder durch das Umschalten von Klassen ausgelöst.

.button {
  background: #6366f1;
  color: white;
  padding: 0.75rem 1.5rem;
  border-radius: 8px;
  transition: background 200ms ease, transform 200ms ease;
}

.button:hover {
  background: #4f46e5;
  transform: translateY(-2px);
}

.button:active {
  transform: translateY(0);
}

Die Transition-Kurzschreibweise

/* Kurzschreibweise: eigenschaft | dauer | timing-funktion | verzögerung */
transition: opacity 300ms ease-in-out 0ms;

/* Mehrere Eigenschaften */
transition: opacity 300ms ease, transform 300ms ease;

/* Alle Eigenschaften (sparsam verwenden!) */
transition: all 200ms ease;

Timing-Funktionen (Timing Functions)

Timing-Funktionen steuern die Beschleunigungskurve einer Animation. Sie entscheiden darüber, ob eine Animation mechanisch oder natürlich wirkt.

• ease — Langsamer Start, Beschleunigung in der Mitte, langsames Ende. Ein guter Standard.
• ease-in — Langsamer Start, schnelles Ende. Ideal für Elemente, die den Bildschirm verlassen.
• ease-out — Schneller Start, langsames Ende. Perfekt für Elemente, die auf dem Bildschirm erscheinen.
• ease-in-out — An beiden Enden langsam. Gut geeignet für durchgehende Schleifen.
• linear — Gleichmäßige Geschwindigkeit. Ideal für Fortschrittsbalken und Ladeanzeigen.
• cubic-bezier() — Benutzerdefinierte Kurve für präzise Kontrolle über die Animation.

/* Sprunghafter "Feder"-Effekt */
transition: transform 500ms cubic-bezier(0.34, 1.56, 0.64, 1);

/* Knackiges "Material Design"-Gefühl */
transition: all 225ms cubic-bezier(0.4, 0, 0.2, 1);

CSS Keyframe-Animationen

Wenn Sie mehr als eine einfache Zwei-Zustands-Änderung benötigen, ermöglichen Keyframe-Animationen die Definition mehrerer Schritte innerhalb einer Animationssequenz.

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.card {
  animation: fadeInUp 600ms ease-out forwards;
}

/* Karten gestaffelt mit Verzögerung */
.card:nth-child(2) { animation-delay: 100ms; }
.card:nth-child(3) { animation-delay: 200ms; }
.card:nth-child(4) { animation-delay: 300ms; }

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

.live-indicator {
  animation: pulse 2s ease-in-out infinite;
}

Performance: Was soll animiert werden?

Nicht alle CSS-Eigenschaften sind gleichwertig, wenn es um Animationsperformance geht. Das Animieren einiger Eigenschaften löst kostspielige Layout-Neuberechnungen aus, während andere vollständig von der GPU übernommen werden.

• ✅ GPU-beschleunigt (günstig): transform, opacity
• ⚠️ Löst Painting aus (moderat): background-color, box-shadow, border-color
• ❌ Löst Layout aus (teuer): width, height, margin, padding, top, left

Regel: Animieren Sie, wann immer möglich, transform und opacity. Anstatt width zu animieren, verwenden Sie transform: scaleX(). Anstatt top zu animieren, nutzen Sie transform: translateY().

.animated-element {
  /* Hinweis für den Browser, in eine eigene Compositor-Ebene zu fördern */
  will-change: transform, opacity;

  /* Fallback für ältere Browser */
  transform: translateZ(0);
}

Berücksichtigung von Benutzereinstellungen

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

Manche Nutzer leiden unter Reisekrankheit oder vestibulären Störungen. Integrieren Sie immer eine prefers-reduced-motion Media Query, um Animationen für Benutzer, die diese Einstellung aktiviert haben, zu deaktivieren oder zu reduzieren.