CSS Animationen und Übergänge

transition, transform, Hover States, animation, keyframes und Performance. Diese Seite ist als Lernunterlage, Nachschlagewerk und Prüfungsvorbereitung für die CAP-Ausbildung gedacht.

Lernziele

• Übergänge und Animationen unterscheiden
• sinnvolle Hover- und Fokuszustände gestalten
• Performance bei Animationen beachten

Erklärung

transition animiert Änderungen zwischen zwei Zuständen. animation mit @keyframes beschreibt eine eigenständige Bewegung. Für performante Animationen sind transform und opacity meist besser als Layout-Eigenschaften wie width oder top.

Animation soll Orientierung geben, nicht vom Inhalt ablenken.

Beispiele

.button {
  transition: transform 160ms ease, background-color 160ms ease;
}

.button:hover,
.button:focus-visible {
  transform: translateY(-1px);
}

Der Zustand reagiert auf Maus und Tastaturfokus.

@keyframes fade-in {
  from { opacity: 0; transform: translateY(0.5rem); }
  to { opacity: 1; transform: translateY(0); }
}

.toast {
  animation: fade-in 220ms ease-out;
}

Kurze Animationen können neue UI-Elemente verständlicher machen.

Typische Fehler

• Nur Hover gestalten und Tastaturfokus vergessen.
• Daueranimationen ohne Nutzen einsetzen.
• Layout-Eigenschaften animieren und Ruckeln verursachen.

Best Practices

• Halte Animationen kurz und zweckmäßig.
• Berücksichtige prefers-reduced-motion bei stärkeren Bewegungen.
• Animiere bevorzugt transform und opacity.

Kleine Übung

Erstelle einen Button mit Hover- und Fokuszustand sowie eine kurze Einblendanimation für eine Erfolgsmeldung.

Zusammenfassung

CSS sollte Gestaltung systematisch lösen: klare Selektoren, wiederkehrende Werte, responsive Layouts und verständliche Zustände. Gute Stylesheets bleiben auch bei wachsenden Seiten wartbar.

Weiterführende Seiten

• Vorherige Seite: CSS Responsive Design
• Nächste Seite: CSS Variablen
• Zur Übersicht
• CSS Selektoren
• CSS Best Practices