CSS-Animationen sind browserbasierte Bewegungseffekte, die ohne JavaScript allein durch Cascading Style Sheets gesteuert werden und visuelle Übergänge, Zustandswechsel und kontinuierliche Animationen im Web ermöglichen.
Rubrik: Mediendesign & Digitale Medien · Unterrubrik: Web-Grundlagen · Niveau: Fortgeschritten Synonyme / Auch bekannt als: CSS Transitions, CSS Keyframe Animations, Web Animations, Motion im Web
Was sind CSS-Animationen?
Bewegung ist im Web kein Luxus – sie vermittelt Kontext, bestätigt Interaktionen und leitet die Aufmerksamkeit. CSS bietet dafür zwei grundlegende Werkzeuge: Transitions für einfache Zustandswechsel und Keyframe-Animationen für komplexere, mehrphasige Bewegungen.
Für Designer ist das Verständnis von CSS-Animationen aus zwei Gründen wichtig: Erstens ermöglicht es, in Prototypen und Figma-Animationen realistische Effekte zu modellieren. Zweitens verhindert es unrealistische Erwartungen – nicht jede After-Effects-Animation ist 1:1 im Web umsetzbar.
Erklärung
CSS Transitions
Transitions erzeugen einen fließenden Übergang zwischen zwei Zuständen eines Elements – zum Beispiel die Farbänderung eines Buttons beim Hover. Sie definieren:
- Property: Welche CSS-Eigenschaft soll animiert werden? (z. B.
color,background-color,transform) - Duration: Wie lange dauert der Übergang? (z. B.
0.3s) - Easing: Wie beschleunigt/verlangsamt der Übergang? (z. B.
ease-in-out) - Delay: Verzögerung vor dem Start (z. B.
0.1s)
CSS Keyframe-Animationen
Keyframe-Animationen ermöglichen mehrphasige Bewegungen, die unabhängig von Nutzerinteraktionen ablaufen können. Sie definieren Zustände an bestimmten Prozentwerten: 0% ist der Start, 100% das Ende, dazwischen beliebige Zwischenstufen.
Typische Anwendungsfälle: Lade-Spinner, pulsierende Aufmerksamkeitselemente, einblendende Seiteninhalte beim Scrollen.
Easing – das Herzstück guter Animationen
Easing beschreibt, wie sich die Geschwindigkeit einer Animation über die Zeit verändert. Lineare Animationen (konstante Geschwindigkeit) wirken mechanisch und unnatürlich. Natürliche Bewegungen beschleunigen und bremsen.
| Easing | Beschreibung | Verwendung |
|---|---|---|
linear | Konstante Geschwindigkeit | Spinner, Fortschrittsbalken |
ease | Startet langsam, beschleunigt, bremst | Standard-Transitions |
ease-in | Beginnt langsam | Elemente, die wegschwingen/verschwinden |
ease-out | Endet langsam | Elemente, die einfahren/erscheinen |
ease-in-out | Langsam am Anfang und Ende | Hin-und-Her-Bewegungen |
cubic-bezier() | Individuell definiert | Präzise, markenspezifische Curves |
Google Material Design empfiehlt für fast alle UI-Animationen ease-out-Kurven – Elemente erscheinen schnell und bremsen sanft ab, was natürlich wirkt (Google, 2023).
Animierbare Eigenschaften
Nicht alle CSS-Eigenschaften können sinnvoll animiert werden. Browser animieren am effizientesten Eigenschaften, die der GPU berechnet:
transform(verschieben, drehen, skalieren) – sehr performantopacity(Ein-/Ausblenden) – sehr performantfilter(Blur, Helligkeit) – performant auf modernen Gerätencolor,background-color– akzeptabelwidth,height,margin– teuer, löst Neuberechnungen aus (vermeiden!)
Das Animieren von width oder height veranlasst den Browser zu einem kompletten Layout-Neuberechnung (Reflow), was ruckeln kann. Page Speed und Core Web Vitals: Was Designer wissen müssen erklärt, warum das relevant für Performance ist.
Dauer-Empfehlungen
- Micro-Interaktionen (Hover, Click): 100–200 ms
- Übergänge (Modal öffnet, Dropdown erscheint): 200–400 ms
- Seitenübergänge: 300–600 ms
- Dekorative Animationen: je nach Kontext, aber selten über 1 Sekunde
Nick Babich (Adobe XD Ideas, 2017) fasst zusammen: Zu schnelle Animationen wirken abgehackt, zu langsame frustrieren Nutzer, die die UI oft kennen.
Beispiele
Button-Hover: Hintergrundfarbe wechselt in 200 ms von Primärfarbe zu einem dunkleren Ton – Transition auf background-color mit ease-out.
Modal erscheint: Das Modal-Fenster wird von leicht unterhalb in seine finale Position geschoben und dabei eingeblendet – transform: translateY(20px) zu translateY(0) kombiniert mit opacity: 0 zu 1, Dauer 300 ms, ease-out.
Skeleton Loading: Grau-Rechtecke als Platzhalter für Inhalte, die noch laden – Keyframe-Animation mit einer Helligkeit-Pulsation (opacity zwischen 0.4 und 1).
In der Praxis
Prototyping in Figma
Figma-Animationen werden in Prototyp-Verbindungen definiert. Die Optionen (Ease In, Ease Out, etc.) entsprechen direkt den CSS-Easing-Kurven. Mit dem Plugin „Flow" oder dem Übergangstyp „Smart Animate" können realistische CSS-ähnliche Transitionen simuliert werden.
Wichtig: Figma-Animationen sind Prototyping-Tools, keine Produktionsspezifikation. Die finale Animation muss vom Entwickler in CSS implementiert werden. Beim Handoff an Entwickler: Figma, Zeplin, Storybook sollten Easing, Dauer und animierte Eigenschaften explizit dokumentiert sein.
Reduced Motion
Nicht alle Nutzer können Animationen problemlos wahrnehmen. Menschen mit Gleichgewichtsstörungen, vestibulären Erkrankungen oder Epilepsie können durch Bewegung beeinträchtigt werden. Das CSS-Feature prefers-reduced-motion ermöglicht es, Animationen zu deaktivieren, wenn der Nutzer das in seinen Systemeinstellungen angegeben hat. Barrierefreiheit im Web (WCAG 2.2) für Designer erklärt diese Anforderung im Kontext der WCAG-Richtlinien.
Designer sollten sich fragen: Welche Animationen sind essentiell (vermitteln Information), welche sind rein dekorativ (können deaktiviert werden)?
Micro-Interactions
Der Unterschied zwischen einer guten und einer herausragenden UI liegt oft in kleinen Animationen, die Feedback geben. Micro-Interactions im Web: Hover, Click, Load widmet sich diesem Thema ausführlich.
Vergleich & Abgrenzung
| Technik | Beschreibung | Verwendung |
|---|---|---|
| CSS Transition | Übergang zwischen zwei Zuständen | Hover, Fokus, Toggle |
| CSS Keyframes | Mehrphasige Animation | Spinner, Intro-Animationen |
| JavaScript Animation | Programmatisch gesteuert | Komplexe, interaktive Bewegungen |
| GSAP | JS-Animationsbibliothek | Aufwendige Scroll- und Sequenz-Animationen |
| Lottie | JSON-basiert, aus After Effects | Illustrative Animationen, Onboarding |
Häufige Fragen (FAQ)
Kann ich After-Effects-Animationen direkt ins Web exportieren? Mit dem Lottie-Plugin für After Effects (Bodymovin) ja – als JSON-Datei. Das Ergebnis ist vektorbasiert und skaliert verlustfrei. Für komplexe illustrative Animationen ist Lottie die beste Option.
Wie zeige ich Animationen in Figma? Im Prototype-Modus können Smart Animate und Frame-zu-Frame-Übergänge mit Easing-Optionen simuliert werden. Für präzisere Animationen eignet sich das Plugin „Jitter" oder Prototyping in ProtoPie.
Sind CSS-Animationen performant? Ja, wenn sie auf transform und opacity beschränkt bleiben. Animation von width, height oder margin verursacht Layout-Berechnungen und kann ruckeln.
Verwandte Einträge
- Micro-Interactions im Web: Hover, Click, Load – Kleine Animationen als Feedback-System
- Scroll-Design: Parallax, Scrollytelling, Sticky Elements – Scroll-gesteuerte Animationen
- Barrierefreiheit im Web (WCAG 2.2) für Designer – Reduced Motion und Barrierefreiheit
- Page Speed und Core Web Vitals: Was Designer wissen müssen – Performance-Implikationen von Animationen
- Handoff an Entwickler: Figma, Zeplin, Storybook – Animations-Specs übergeben
Weiterführend
- Babich, N. (2017). The Ultimate Guide to Web Animation. Adobe XD Ideas.
- Google (2023). Motion – Material Design 3.
- Coyier, C. (2022). A Practical Guide to CSS Animations. CSS-Tricks.
- Cemper, F. & Rüttimann, F. (2021). Animation Handbook.
- W3C (2023). CSS Animations Level 1.
