Cluster C4: CSS und Design
Kompletter Leitfaden zu CSS-Animationen und Transitions
Bewegung sollte Zustandswechsel erklären und nicht vom Inhalt ablenken. Wenn Transitions, Keyframes und Easing systematisch eingesetzt werden, wirkt die UI kontrollierter.
Transitions und Keyframes bewusst trennen
Transitions eignen sich für Hover, Fokus und Ein-/Ausklappen, also für klare Zustandswechsel zwischen zwei Punkten.
Keyframes sind besser für Loader oder gerichtete Aufmerksamkeit, müssen aber subtil bleiben und eine Reduced-Motion-Alternative haben.
Welche Regeln Teams festziehen sollten
- Bevorzugt `transform` und `opacity` animieren.
- Nur wenige Easing-Token wie Eintritt, Austritt und Hervorhebung definieren.
- Dauer und Easing als Design-Token pflegen statt pro Komponente neu zu erfinden.
Praktisches Ein-/Ausgabe-Beispiel
Eingabe
Komponente: Toggle-Switch Ziel: schnelles, klares Zustandsfeedback
Ausgabe
transform 180ms cubic-bezier(.2,.8,.2,1) color 140ms ease-out