CSS Animationen & Transitions

CSS Animationen ermöglichen das gezielte Verändern von CSS-Eigenschaften über Zeit — ohne JavaScript — durch Keyframes und Transitions, die flüssige Übergänge und visuelle Rückmeldungen im Browser erzeugen.

Rubrik: Mediendesign & Digitale Medien · Unterrubrik: Web Design · Niveau: Fortgeschritten Synonyme / Auch bekannt als: CSS Motion, Web Animationen, CSS Transitions, Keyframe-Animationen

Was sind CSS Animationen?

Animationen im Web waren lange das Terrain von JavaScript-Bibliotheken oder dem inzwischen eingestellten Flash. Seit CSS3 können Animationen direkt in der Stylesheet-Sprache definiert werden — performant, deklarativ und ohne zusätzliche Abhängigkeiten. CSS bietet zwei zentrale Mechanismen: Transitions für einfache Zustandsübergänge und Keyframe-Animationen für komplexere Bewegungsabläufe.

Erklärung

CSS Transitions

Transitions animieren Änderungen von CSS-Eigenschaften, wenn ein Element seinen Zustand wechselt (z. B. durch Hover oder Fokus). Sie sind der einfachste Einstieg in CSS-Bewegung:

```css .button { background-color: #0070f3; transition: background-color 0.3s ease, transform 0.2s ease; }

.button:hover { background-color: #0050c0; transform: translateY(-2px); } ```

Transition-Eigenschaften:

• transition-property: Welche CSS-Eigenschaft animiert wird (oder all)
• transition-duration: Wie lange die Animation dauert (z. B. 0.3s)
• transition-timing-function: Das Easing (Beschleunigungs-/Verzögerungsverhalten)
• transition-delay: Verzögerung vor Animationsstart

Wichtige Regel: Nur Eigenschaften mit messbaren Zwischenwerten sind animierbar — also opacity, transform, color, width, aber nicht display oder visibility (diese schalten diskret um).

CSS Keyframe-Animationen

Für komplexere Animationsabläufe mit mehreren Stationen verwendet man @keyframes:

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

.card { animation: einblenden 0.5s ease-out forwards; } ```

Animation-Eigenschaften:

• animation-name: Name des @keyframes-Blocks
• animation-duration: Dauer
• animation-timing-function: Easing
• animation-delay: Verzögerung
• animation-iteration-count: Wiederholungen (infinite für Daueranimation)
• animation-direction: Richtung (normal, reverse, alternate)
• animation-fill-mode: Zustand vor/nach der Animation (forwards = bleibt am Endstand)

Keyframes können auch mit Prozentwerten für mehrere Zwischenstationen definiert werden:

``css @keyframes pulsieren { 0% { transform: scale(1); } 50% { transform: scale(1.05); } 100% { transform: scale(1); } } ``

Easing-Funktionen

Easing beschreibt die Beschleunigungskurve einer Animation — ob sie linear, sanft anlaufend oder abbremsend wirkt:

• linear: Konstante Geschwindigkeit — wirkt mechanisch
• ease: Sanftes Anfahren, schnelle Mitte, sanftes Abbremsen (Standard)
• ease-in: Langsam starten, dann beschleunigen
• ease-out: Schnell starten, dann abbremsen (natürlichste Wirkung für Einblendungen)
• ease-in-out: Sowohl Anlauf als auch Abbremsung sanft
• cubic-bezier(x1, y1, x2, y2): Benutzerdefinierte Kurve
• steps(n): Diskrete Schritte — für Frame-by-Frame-Animationen

Für natürlich wirkende Bewegungen empfiehlt sich meist ease-out (wie ein Ball, der aufschlägt und zur Ruhe kommt) oder spezifische cubic-bezier-Werte.

Transform: die wichtigste Animations-Eigenschaft

transform ist die leistungsfähigste Eigenschaft für Animationen, da sie GPU-beschleunigt ist und kein Layout-Reflow auslöst:

• translate(x, y) / translateX() / translateY(): Verschiebung
• scale(factor): Skalierung
• rotate(deg): Drehung
• skew(deg): Verzerrung
• Mehrere Transforms kombinieren: transform: translateX(10px) scale(1.1) rotate(5deg)

Performance: die zwei goldenen Regeln

CSS-Animationen können die Performance einer Seite erheblich beeinflussen. Zwei Regeln:

1. Nur `transform` und `opacity` animieren: Diese Eigenschaften lösen kein Layout-Reflow oder Repaint aus und werden direkt auf der GPU berechnet.
2. `will-change` mit Bedacht einsetzen: will-change: transform signalisiert dem Browser, ein Element in einen eigenen Compositing-Layer auszulagern — verbessert Performance bei komplexen Animationen, erhöht aber den Speicherverbrauch.

Animationen von width, height, margin, padding oder top/left erzeugen Layout-Reflows und sollten vermieden werden, wenn transform: translate() dieselbe Wirkung erzielt.

Barrierefreiheit und Reduzierbewegung

Viele Menschen reagieren empfindlich auf Bewegung (vestibuläre Störungen, Epilepsie). Die CSS-Media-Query prefers-reduced-motion erlaubt es, Animationen für betroffene Nutzer zu reduzieren:

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

Dies ist auch ein Kriterium der WCAG 2.1 (Erfolgskriterium 2.3.3, AAA). Verantwortungsvolles Animations-Design berücksichtigt diese Nutzergruppe von Beginn an.

Beispiele

Ladeanimation: ```css @keyframes drehen { to { transform: rotate(360deg); } }

.spinner { width: 40px; height: 40px; border: 4px solid #e0e0e0; border-top-color: #0070f3; border-radius: 50%; animation: drehen 0.8s linear infinite; } ```

Sanftes Einblenden von Seitenelementen: ```css @keyframes slideUp { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } }

.feature-card { animation: slideUp 0.6s ease-out both; } ```

In der Praxis

CSS Animationen werden heute standardmäßig für Hover-Effekte, Ladeanimationen, modale Dialoge, Dropdown-Menüs und Scroll-Triggered-Einblendungen verwendet. Bibliotheken wie Animate.css bieten fertige Animationsklassen, während das moderne GSAP (GreenSock) für komplexere JavaScript-gesteuerte Animationen die Referenz ist.

Vergleich & Abgrenzung

Häufige Fragen (FAQ)

Warum ruckelt meine CSS-Animation auf Mobilgeräten? Wahrscheinlich werden Eigenschaften animiert, die Layout-Reflows auslösen (z. B. height oder left). Umstieg auf transform und opacity behebt das Problem in den meisten Fällen.

Kann ich CSS Animationen mit JavaScript kombinieren? Ja. Animationsklassen können per JavaScript hinzugefügt oder entfernt werden. Alternativ können CSS Custom Properties (--x: 100px) per JS verändert werden und fließen in CSS-Animationen ein.

Wie lang sollte eine UI-Animation dauern? Google Material Design empfiehlt 100–300 ms für UI-Übergänge. Kürzere Animationen wirken reaktiv, längere erzählerisch. Über 500 ms wirken UI-Animationen meist zu langsam und störend.

Verwandte Einträge

• Micro-Interactions – kleine Animationen mit großer Wirkung — Kleine animierte Rückmeldungen in Benutzeroberflächen
• Scrollytelling & Parallax — Scroll-driven Animations in CSS
• Web Accessibility (Barrierefreiheit) — prefers-reduced-motion und barrierefreie Bewegung
• Web Design Grundlagen — Grundlagen visuellen Designs im Web

Weiterführend

• Thomas, Frank / Johnston, Ollie: The Illusion of Life: Disney Animation, Abbeville Press, 1981
• Google: Material Design Motion Guidelines, material.io, 2023
• Coyier, Chris: Transitions & Animations, css-tricks.com (laufend aktualisiert)
• Holman, Val: Designing Interface Animation, Rosenfeld Media, 2017
• MDN Web Docs: Using CSS Animations, developer.mozilla.org (laufend aktualisiert)