CSS Transitions

CSS Transitions sind eine CSS-Technologie, die automatisch einen sanften Übergang erzeugt, wenn sich eine CSS-Eigenschaft eines Elements von einem Wert zu einem anderen verändert.

Was sind CSS Transitions?

CSS Transitions (Spezifikation: CSS Transitions Module Level 1, W3C) sind das einfachste Werkzeug für Animation im Web. Während CSS Animationen (@keyframes) mit @keyframes komplexe Sequenzen erlauben, sind Transitions auf genau zwei Zustände beschränkt: den Ausgangszustand und den Zielzustand. Der Browser berechnet alle Zwischenwerte automatisch.

Transitions werden ausgelöst durch Zustandsänderungen – klassischerweise :hover, aber auch :focus, :active, das Hinzufügen von Klassen per JavaScript oder CSS-Custom-Property-Änderungen.

Erklärung

Grundsyntax

```css .element { / Ausgangszustand / background-color: #0078ff; transform: scale(1);

/ Transition-Deklaration / transition: background-color 0.3s ease, transform 0.2s ease-out; }

.element:hover { / Zielzustand / background-color: #0050cc; transform: scale(1.05); } ```

Die vier transition-Teilwerte

Kurzform

```css / Einzelne Eigenschaft / transition: transform 0.3s ease-out;

/ Mehrere Eigenschaften / transition: transform 0.3s ease-out, opacity 0.2s linear, color 0.15s ease;

/ Alle Eigenschaften (vermeiden!) / transition: all 0.3s ease; ```

Achtung: transition: all kann unerwartete Animationen auslösen und ist für die Performance ungünstig, da der Browser viele Eigenschaften beobachten muss.

Timing-Funktionen im Detail

```css / Klassische Schlüsselwörter / transition-timing-function: ease; / 0.25, 0.1, 0.25, 1 – natürlicher Standard / transition-timing-function: ease-in; / Startet langsam – für Elemente die „weggehen" / transition-timing-function: ease-out; / Endet langsam – für Elemente die „ankommen" / transition-timing-function: ease-in-out; / Sanft beidseitig / transition-timing-function: linear; / Gleichmäßig – für rotierende Elemente /

/ Bézier-Kurve / transition-timing-function: cubic-bezier(0.34, 1.56, 0.64, 1); / Federt ein /

/ Schrittweise / transition-timing-function: steps(3, start); ```

Eine praktische Referenz für Bézier-Kurven bietet easings.net (Tobias Ahlin, laufend aktualisiert).

Beispiele

Navigationslink mit Unterstrich

```css .nav-link { position: relative; color: #333; text-decoration: none; }

.nav-link::after { content: ''; position: absolute; bottom: -2px; left: 0; width: 0; height: 2px; background-color: #0078ff; transition: width 0.3s ease-out; }

.nav-link:hover::after { width: 100%; } ```

Karte mit Tiefenwirkung

```css .karte { border-radius: 12px; box-shadow: 0 2px 8px rgba(0,0,0,0.08); transform: translateY(0); transition: box-shadow 0.25s ease-out, transform 0.25s ease-out; }

.karte:hover { box-shadow: 0 12px 32px rgba(0,0,0,0.16); transform: translateY(-4px); } ```

Modal Ein-/Ausblenden mit JavaScript

```css .modal { opacity: 0; visibility: hidden; transition: opacity 0.25s ease, visibility 0.25s ease; }

.modal.aktiv { opacity: 1; visibility: visible; } ```

``javascript document.querySelector('.modal-oeffnen').addEventListener('click', () => { document.querySelector('.modal').classList.add('aktiv'); }); ``

Hinweis: visibility muss immer zusammen mit opacity animiert werden. Nur opacity: 0 blendet ein Element optisch aus, macht es aber für Screenreader und Tastatur weiterhin zugänglich.

In der Praxis

CSS Transitions sind das Arbeitspferd jedes UI-Designers. Durchschnittlich gute Interfaces verwenden sie für Hover-Effekte; wirklich gute Interfaces setzen sie für alle interaktiven Zustände ein: Hover, Fokus, Aktiv, Deaktiviert, Geladen.

Design-Richtlinien (nach Val Head, 2019):

• Kurze Dauer (100–300 ms) für direkte Reaktionen auf User-Input
• Ease-out für Elemente, die auf Interaktion reagieren (fühlt sich reaktionsschnell an)
• Ease-in für Elemente, die verschwinden
• Konsistente Dauern innerhalb einer Komponente

Barrierefreiheit: ``css @media (prefers-reduced-motion: reduce) { * { transition-duration: 0.01ms !important; transition-delay: 0ms !important; } } ``

Vergleich & Abgrenzung

Für komplexe, mehrstufige Übergänge oder Animationen ohne User-Auslöser sind CSS Animationen (@keyframes) besser geeignet. Für programmatische Kontrolle bietet die Web Animations API (WAAPI) mehr Flexibilität.

Häufige Fragen (FAQ)

Warum funktioniert meine Transition nicht bei `display`-Änderungen? display: none ist nicht animierbar, da es keinen numerischen Mittelwert gibt. Verwenden Sie stattdessen opacity + visibility oder pointer-events: none.

Kann ich Farb-Transitions machen? Ja. color, background-color, border-color und box-shadow sind alle animierbar.

Wie animiere ich `height: auto`? Das ist leider nicht direkt möglich. Alternativen: max-height animieren (mit Kompromissen), Grid-Trick mit grid-template-rows: 0fr → 1fr, oder Web Animations API (WAAPI) für echte Höhen-Animation.

Was passiert, wenn ich die Seite verlasse, während eine Transition läuft? Die Transition wird abgebrochen. Das transitioncancel-Event wird ausgelöst.

Verwandte Einträge

• CSS Animationen (@keyframes) – Für mehrstufige Animationen mit @keyframes
• CSS Transforms (2D & 3D) – Die am häufigsten animierte CSS-Eigenschaft
• Hover-Effekte & CSS-States – Konkrete Design-Patterns für Hover-Zustände
• Micro-Interactions im UI Design – Transitions als Basis für UI-Feedback
• Performance-Optimierung bei Web-Animationen – Welche Eigenschaften günstig zu animieren sind

Weiterführend

• MDN Web Docs: Using CSS transitions (2024) – developer.mozilla.org
• Val Head: Designing Interface Animation (2nd Ed., 2019) – Rosenfeld Media
• Tobias Ahlin: easings.net – Visuelle Referenz für Timing-Funktionen
• Lea Verou: CSS Secrets, Kapitel 7 (2015) – O'Reilly Media
• W3C: CSS Transitions Module Level 1 – w3.org