Was ist cubic-bezier und warum reicht "ease" nicht?
Jede CSS-Animation hat eine Timing-Funktion (die Beschleunigungskurve). `ease`, `linear`, `ease-in-out` sind Presets, aber in modernen UIs sollen Animationen natürlich wirken (wie in der realen Welt) - das Element beschleunigt, bremst ab, schießt manchmal etwas über.
cubic-bezier(x1, y1, x2, y2) gibt dir volle Kontrolle über die Kurve. Du übergibst 4 Zahlen und die Animation verhält sich genau so, wie du willst: langsamer Start mit kraftvollem Ende, umgekehrt oder ein kleiner "Back" (Überschwingen und Zurück, wie ein Gummiband).
Hier bekommst du einen interaktiven Graphen. Zieh zwei farbige Kontrollpunkte, um die Kurve zu formen. Darunter zeigt ein Animations-Ball deine Kurve in Bewegung. Y-Werte außerhalb 0-1 erzeugen Bounce-/Back-Effekte.
So nutzt du es
- Wähl ein Preset aus der rechten Spalte (linear, ease-in, ease-out, bounce, back). Jedes ist eine klassische Kurve.
- Zieh den blauen oder violetten Punkt im Graphen, um die Kurve zu formen.
- Darunter siehst du den Animations-Ball mit deiner Kurve. Replay-Button, falls er durchgelaufen ist.
- Der Dauer-Schieberegler (100-3000ms) zeigt, wie die Kurve bei verschiedenen Geschwindigkeiten wirkt.
- Kopier den cubic-bezier(...)-Aufruf und füg ihn in `transition-timing-function` oder `animation-timing-function` ein.
Wann das hilft
Eine Bezier-Kurve ist der Unterschied zwischen billiger und Premium-UI. Beispiel: Karten-Hover mit `transition: transform 200ms linear` vs. `200ms cubic-bezier(0.4, 0, 0.2, 1)` (Material-Standard-Easing). Tag und Nacht:
- Modal poppt sanft auf mit `ease-out-cubic`. Schneller Start, weiche Landung = natürliche Bewegung.
- Karte fährt nach dem Hover zurück mit `ease-in-cubic`. Langsamer Start, schnelles Ende = wie Schwerkraft.
- Bouncy Reveal mit `ease-out-back` (y2 über 1). Element schiebt rein, schießt leicht über, setzt sich. Aufmerksamkeit ohne zu nerven.
- iOS-style Spring ist ein stärkeres Back/Elastic. Oft einfacher in Framer Motion (Spring-Physik vs. Bezier).
- Material Design nutzt `cubic-bezier(0.4, 0, 0.2, 1)` (Standard-Ease) für die meisten Komponenten. Apple HIG hat eigene, ähnliche Werte.
- Sanftes Scrollen (z. B. Anchor-Links): `ease-in-out` gibt einen bewussten Übergang, spürbar, ohne langsam zu wirken.
Nach der Kurvenwahl nutzt du sie in `transition`, `animation` (mit @keyframes) und Framer Motion (`ease: [0.4, 0, 0.2, 1]`). Für @keyframes-Animationen bearbeiten sieh den CSS-Animation-Builder.