Was stellt eine Cubic-Bezier-Kurve eigentlich dar?

Die X-Achse ist die Zeit, die Y-Achse der Fortschritt. Eine gerade Diagonale (`cubic-bezier(0, 0, 1, 1)` = `linear`) heisst: Fortschritt ist proportional zur Zeit - langweilige Bewegung. Eine S-Kurve (das Default-`ease`) bedeutet: langsam am Anfang, schnell in der Mitte, langsam am Ende - genau, was das Auge von einem physischen Objekt erwartet, das beschleunigt und dann abbremst. Die beiden Griffe bestimmen, wie aggressiv diese S-Kurve ist.

Kann Y über 1 oder unter 0 gehen?

Y schon - und so entstehen Bounce, Overshoot und Anticipation. `cubic-bezier(0.68, -0.55, 0.27, 1.55)` überschiesst am Anfang und am Ende, was sich «gummi» anfühlt. X nicht - die Spezifikation verlangt, dass die Zeitachse in 0-1 bleibt, sonst wäre das Easing keine Funktion und der Browser könnte es nicht abtasten. Den Griff in Y unter 0 oder über 1 ziehen, um mit Overshoot zu spielen.

Welches Preset für welche Art Animation?

`ease-out` (oder Materials «decelerate») für Elemente, die auf den Bildschirm kommen - sie wirken, als landen sie sanft. `ease-in` («accelerate») für Elemente, die verschwinden - sie wirken, als würden sie weggerissen. `ease-in-out` («standard») für Elemente, die sich auf dem Bildschirm bewegen (Panel-Slides, Karten-Flips). `linear` nur für sich wiederholende Animationen (Spinner) - das einzige Easing, das ohne sichtbaren Ruck loopt.

Warum fühlt sich Materials «standard» anders an als CSS `ease`?

CSS `ease` ist `cubic-bezier(0.25, 0.1, 0.25, 1)` - eine sanfte S-Kurve. Materials standard ist `cubic-bezier(0.4, 0, 0.2, 1)` - aggressiveres Abbremsen. Die Material-Kurve wirkt «designt»: Elemente kommen schnell an und beruhigen sich. CSS `ease` wurde Ende der 90er gewählt und ist älter als moderne UI-Motion-Konventionen; die meisten Design-Systeme überschreiben es.

Kann ich cubic-bezier in JS-Animationsbibliotheken nutzen?

Ja. GSAP, Framer Motion, Anime.js und die Web Animations API akzeptieren cubic-bezier-Werte. Der Prop-Name variiert (`ease: 'cubic-bezier(...)'` vs `easing: [x1,y1,x2,y2]` vs `ease: cubicBezier(x1,y1,x2,y2)`), aber die vier Zahlen sind universell - aus dem Generator kopieren und sie funktionieren überall.

Cubic-Bezier-Generator

Visueller Cubic-Bezier-Editor mit animierter Vorschau und 12 Standard-Easing-Presets.

Voreinstellungen

Orange Punkte ziehen, um die Kurve zu formen.

CSS

transition-timing-function: cubic-bezier(0.42, 0.00, 0.58, 1.00);

Vorschau

Beide Griffe ziehen, um die Kurve zu formen. Der Vorschau-Ball spielt das Easing in Schleife - man spürt das Timing, nicht nur die Mathematik. Presets decken die vier CSS-Keywords (ease, ease-in, ease-out, ease-in-out) und die kanonischen Material-Design-Kurven (standard, decelerate, accelerate, sharp) ab. Werte werden begrenzt, wo Browser es verlangen - X bleibt 0-1, Y darf überschiessen (negativ oder >1) für Bounce und Anticipation.

So funktioniert's

Preset wählen
CSS-Keywords (ease, ease-in, ease-out, ease-in-out) oder Material-Kurven (standard, decelerate, accelerate, sharp) - ein Klick lädt die Werte.
Griffe ziehen
P1 und P2 formen die Kurve um. Der animierte Vorschau-Ball aktualisiert sich live, damit man das neue Timing fühlt, bevor man committet.
Vorschau beobachten
Der Ball loopt das Easing endlos. Zwischen Move, Scale und Opacity wechseln, um zu sehen, wie sich dieselbe Kurve auf unterschiedlichen Eigenschaften anfühlt.
Wert kopieren
Der String `cubic-bezier(x1, y1, x2, y2)` steht bereit zum Einfügen in CSS-Transition, Animation oder JS-Easing-Prop.

Was ist das?

Cubic-bezier ist das Easing-Funktion-Format von CSS-Transitions, CSS-Animations, der Web Animations API und den meisten JS-Animationsbibliotheken. Es nimmt zwei Kontrollpunkte (P1 und P2) im Einheitsquadrat; zusammen mit dem impliziten Start (0,0) und Ende (1,1) definieren sie eine Kurve, die vergangene Zeit auf Fortschritt abbildet. Die Form der Kurve bestimmt, ob Animationen knackig, sanft, federnd oder roboterhaft wirken.

Wann verwenden

Motion für ein Design-System gestalten (welche Kurve für Entry, Exit, In-Place-Bewegung), zur Motion-Sprache einer Plattform passen (Material, iOS, eigene), federndes Klick-Feedback mit Overshoot-Kurven, CSS-Transitions bei Hover/Focus glätten, das passende Easing für Chart-Animationen wählen (linear für Achsen, ease-out für Balken), und Easing den Teammates erklären, ohne in Mathe einzutauchen.

Häufige Fehler

`linear` für eine einmalige Bewegung verwenden - wirkt mechanisch, weil sich kein reales Objekt mit konstanter Geschwindigkeit bewegt. Für jede Transition eine andere Kurve wählen - inkonsistente Bewegung wirkt ruckelig; Design-Systeme fixieren 3-5 Kurven und nutzen sie überall. Vergessen, dass Overshoot-Kurven clipping erzeugen können, wenn die animierte Eigenschaft Grenzen hat (eine Rotation darf überschiessen; ein Slide, der vom Bildschirm laufen würde, wirkt kaputt). Langsame Eigenschaften mit aggressiven Kurven animieren - ein 2-Sekunden-Slide mit hartem Ease-out wirkt wie ein Glitch.

FAQ

Was stellt eine Cubic-Bezier-Kurve eigentlich dar?: Die X-Achse ist die Zeit, die Y-Achse der Fortschritt. Eine gerade Diagonale (`cubic-bezier(0, 0, 1, 1)` = `linear`) heisst: Fortschritt ist proportional zur Zeit - langweilige Bewegung. Eine S-Kurve (das Default-`ease`) bedeutet: langsam am Anfang, schnell in der Mitte, langsam am Ende - genau, was das Auge von einem physischen Objekt erwartet, das beschleunigt und dann abbremst. Die beiden Griffe bestimmen, wie aggressiv diese S-Kurve ist.
Kann Y über 1 oder unter 0 gehen?: Y schon - und so entstehen Bounce, Overshoot und Anticipation. `cubic-bezier(0.68, -0.55, 0.27, 1.55)` überschiesst am Anfang und am Ende, was sich «gummi» anfühlt. X nicht - die Spezifikation verlangt, dass die Zeitachse in 0-1 bleibt, sonst wäre das Easing keine Funktion und der Browser könnte es nicht abtasten. Den Griff in Y unter 0 oder über 1 ziehen, um mit Overshoot zu spielen.
Welches Preset für welche Art Animation?: `ease-out` (oder Materials «decelerate») für Elemente, die auf den Bildschirm kommen - sie wirken, als landen sie sanft. `ease-in` («accelerate») für Elemente, die verschwinden - sie wirken, als würden sie weggerissen. `ease-in-out` («standard») für Elemente, die sich auf dem Bildschirm bewegen (Panel-Slides, Karten-Flips). `linear` nur für sich wiederholende Animationen (Spinner) - das einzige Easing, das ohne sichtbaren Ruck loopt.
Warum fühlt sich Materials «standard» anders an als CSS `ease`?: CSS `ease` ist `cubic-bezier(0.25, 0.1, 0.25, 1)` - eine sanfte S-Kurve. Materials standard ist `cubic-bezier(0.4, 0, 0.2, 1)` - aggressiveres Abbremsen. Die Material-Kurve wirkt «designt»: Elemente kommen schnell an und beruhigen sich. CSS `ease` wurde Ende der 90er gewählt und ist älter als moderne UI-Motion-Konventionen; die meisten Design-Systeme überschreiben es.
Kann ich cubic-bezier in JS-Animationsbibliotheken nutzen?: Ja. GSAP, Framer Motion, Anime.js und die Web Animations API akzeptieren cubic-bezier-Werte. Der Prop-Name variiert (`ease: 'cubic-bezier(...)'` vs `easing: [x1,y1,x2,y2]` vs `ease: cubicBezier(x1,y1,x2,y2)`), aber die vier Zahlen sind universell - aus dem Generator kopieren und sie funktionieren überall.