CSS Cubic-Bezier-Generator

Mit diesem Tool formst du eine eigene CSS-cubic-bezier()-Easing-Kurve mit vier Reglern und siehst sie live in Aktion, bevor du den Code kopierst. Stelle die Kontrollpunkte x1, y1, x2 und y2 ein, beobachte, wie sich Kurve und ein bewegtes Vorschauelement sofort aktualisieren, und kopiere transition-timing-function: cubic-bezier(...) direkt in dein Stylesheet.

Was ist dieses Tool?

cubic-bezier() ist eine CSS-Zeitfunktion, die steuert, wie ein animierter oder transitionierter Wert über die Zeit beschleunigt und abbremst, statt sich gleichmäßig zu bewegen. Sie wird durch zwei Kontrollpunkte definiert — (x1, y1) und (x2, y2) — die eine Kurve zwischen einem festen Startpunkt (0,0) und einem festen Endpunkt (1,1) biegen. Die x-Werte müssen zwischen 0 und 1 liegen, die y-Werte können diesen Bereich für Überschwing- oder Bounce-Effekte verlassen.

Vier Dezimalzahlen von Hand so einzustellen, dass sich die Bewegung weder abrupt noch träge anfühlt, kostet viel Ausprobieren. Dieses Tool ersetzt das Herumraten durch direkte Manipulation: Regler bewegen, zusehen, wie sich die Kurve biegt und der Vorschauball entsprechend bewegt, und das CSS kopieren, sobald die Bewegung stimmt.

Quelle: CSS Easing Functions Level 1, W3C — die Spezifikation, die cubic-bezier() und die fünf benannten Schlüsselwörter definiert, auf denen die Voreinstellungen dieses Tools basieren.

Warum sollte man es nutzen?

Ein Live-SVG-Diagramm zeigt genau, wie sich deine Kurve zwischen den festen Start- und Endpunkten biegt, mit beiden Kontrollpunkten und ihren Griffen zur Übersicht eingezeichnet.
Der Play-Button animiert ein Vorschauelement entlang einer Strecke mit deiner exakten Kurve, damit du die Bewegung spürst statt nur ein statisches Diagramm zu sehen.
Ein-Klick-Voreinstellungen für die fünf standardisierten benannten Easing-Funktionen — ease, ease-in, ease-out, ease-in-out und linear — laut CSS-Easing-Functions-Spezifikation.
y-Werte können unter 0 oder über 1 liegen, wodurch sich Überschwing-/Bounce-Effekte erzeugen lassen, die die benannten Schlüsselwörter nicht abbilden können.
Erzeugt direkt einfügbares transition-timing-function-CSS — derselbe Wert funktioniert auch für animation-timing-function.
Läuft komplett im Browser — nichts, was du einstellst, wird irgendwohin hochgeladen. Kostenlos, keine Anmeldung.

Anleitung

Ziehe die x1/y1-Regler, um den ersten Kontrollpunkt festzulegen, der den Beginn der Animation formt.
Ziehe die x2/y2-Regler, um den zweiten Kontrollpunkt festzulegen, der das Ende der Animation formt.
Beobachte die schwarze Kurve im Diagramm — wölbt sie sich früh über die Diagonale, startet die Bewegung schnell; bleibt sie darunter, startet sie langsam.
Klicke auf Play, um ein Vorschauelement zu sehen, das sich entlang der Strecke mit deiner Kurve als transition-timing-function bewegt.
Probiere eine Voreinstellung (ease, ease-in, ease-out, ease-in-out, linear) als Ausgangspunkt und feinjustiere die Regler von dort aus.
Kopiere das generierte CSS und füge es in eine transition- oder animation-Regel ein.

Beispiel

Eingabe

x1: 0,25, y1: 0,1, x2: 0,25, y2: 1

Ausgabe

transition-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1);

Das sind die exakten Kontrollpunkte des CSS-Standard-Schlüsselworts ease — schneller Start, danach ein allmähliches Abbremsen bis zum Ende.

Warum y-Werte über 0–1 hinausgehen können

Anders als die x-Achse, die Zeit darstellt und von 0 bis 1 laufen muss, stellt die y-Achse den Fortschritt des animierten Werts dar und kennt diese Grenze nicht. y1 unter 0 oder y2 über 1 zu setzen lässt die Kurve vor dem Startwert einsacken oder über den Endwert hinausschießen, bevor sie sich einpendelt — die Grundlage für Überschwing- und Antizipationseffekte, wie sie bei Button-Presses, Modal-Einblendungen und verspielten UI-Mikrointeraktionen genutzt werden. Keines der fünf benannten Schlüsselwörter (ease, ease-in, ease-out, ease-in-out, linear) kann das erzeugen — dafür braucht es ein eigenes cubic-bezier().

transition-timing-function vs. animation-timing-function

Der von diesem Tool erzeugte cubic-bezier()-Wert funktioniert in beiden Eigenschaften identisch. Verwende transition-timing-function, wenn die Bewegung durch eine Zustandsänderung ausgelöst wird (z. B. Hover oder Klassenwechsel), und animation-timing-function innerhalb einer von @keyframes gesteuerten Animationsregel, wenn dasselbe Gefühl automatisch oder in einer Schleife angewendet werden soll.

Gängige Easing-Muster

Knackiges UI-Feedback (Buttons, Schalter): Kontrollpunkte nah an der Diagonalen mit leichtem ease-out-Bias halten, z. B. cubic-bezier(0.4, 0, 0.2, 1).
Material Designs Standardkurve: cubic-bezier(0.4, 0, 0.2, 1) — schneller Start, sanftes Ende, häufig für Panel- und Card-Übergänge verwendet.
Bounce/Überschwingen: y2 über 1 setzen, z. B. cubic-bezier(0.34, 1.56, 0.64, 1), für ein verspieltes Einpoppen.
Antizipation vor der Bewegung: y1 unter 0 setzen, sodass das Element sich vor dem Vorwärtsbewegen leicht zurückzieht.
Weiches ease-in-out für Endlosanimationen: die Kurve nahezu symmetrisch um die Mitte halten.

Kombination mit anderen CSS-Tools

Eine Easing-Kurve steht selten allein — sie wird meist auf ein Element angewendet, das auch Schatten, abgerundete Ecken oder Verläufe braucht. Erzeuge das visuelle Styling mit den anderen CSS-Tools unten und füge dann die Zeitfunktion dieses Tools zur gleichen Regel oder transition-/animation-Deklaration hinzu.

→ Box-Shadow-Generator · Border-Radius-Generator

Häufig gestellte Fragen

Was bedeuten die vier Zahlen in cubic-bezier() eigentlich?

Es sind die Koordinaten zweier Kontrollpunkte, (x1, y1) und (x2, y2), die eine Bézierkurve biegen, die von einem festen Startpunkt bei (0,0) zu einem festen Endpunkt bei (1,1) verläuft. Die x-Achse steht für die verstrichene Zeit (0 bis 1), die y-Achse für den Fortschritt der animierten Eigenschaft — deshalb müssen x1 und x2 zwischen 0 und 1 liegen, während y1 und y2 diesen Bereich verlassen dürfen.

Was ist der Unterschied zwischen ease, ease-in, ease-out und ease-in-out?

ease (der CSS-Standardwert) startet schnell und läuft dann sanft aus. ease-in startet langsam und beschleunigt zum Ende hin, nützlich für Elemente, die den Bildschirm verlassen. ease-out startet schnell und verlangsamt sich, nützlich für Elemente, die eintreten. ease-in-out ist an beiden Enden langsam und in der Mitte schneller, was ein gleichmäßiges, symmetrisches Gefühl ergibt.

Kann ich denselben cubic-bezier()-Wert sowohl für Transitions als auch Animationen verwenden?

Ja. transition-timing-function und animation-timing-function akzeptieren exakt dieselbe cubic-bezier()-Syntax und erzeugen dieselbe Easing-Kurve — der einzige Unterschied ist, an welches CSS-Feature (eine Transition oder eine Keyframes-Animation) diese Zeitfunktion angehängt ist.

Warum sieht meine Kurve seltsam aus, wenn y1 oder y2 sehr groß oder negativ ist?

Das ist normal — y-Werte weit außerhalb von 0–1 zu setzen erzeugt ein starkes Überschwingen, bei dem der animierte Wert deutlich über sein Ziel hinausschießt, bevor er sich einpendelt. Das ist ein gültiger und oft beabsichtigter Effekt; wenn er unerwünscht ist, bring y1 und y2 näher an den Bereich 0–1 zurück.

Ist eine eigene Kurve besser als einfach die benannten Schlüsselwörter zu nutzen?

Nicht unbedingt — die fünf Schlüsselwörter (ease, ease-in, ease-out, ease-in-out, linear) decken die meisten alltäglichen Bedürfnisse ab und sind im Code leichter lesbar. Greife zu einem eigenen cubic-bezier(), wenn du ein bestimmtes Gefühl brauchst, das die Schlüsselwörter nicht bieten, etwa ein Bounce, ein schärferes Zuschnappen oder die Motion-Spezifikation eines bestimmten Design-Systems.