Wie erstelle ich eine benutzerdefinierte Cubic-Bezier-Easing-Kurve für CSS?

Ziehen Sie die beiden Kontrollpunkt-Anfasser im Diagramm, geben Sie exakte x1-, y1-, x2-, y2-Werte ein oder wählen Sie eine Voreinstellung. Wählen Sie dann CSS unter Ausgabeformat und klicken Sie auf Kopieren, um den cubic-bezier()-Wert für transition-timing-function zu erhalten.

Wie erstelle ich einen Bounce- oder Overshoot-Effekt mit Cubic-Bezier?

Ziehen Sie einen Anfasser über oder unter das Feld, sodass sein Y-Wert den Bereich 0–1 überschreitet. Y kann diesen Bereich überschreiten, während X zwischen 0 und 1 bleibt. Die Voreinstellungen back-out und anticipate sind fertige Ausgangspunkte für Overshoot.

Kann ich das Easing für Tailwind, Framer Motion oder anime.js erhalten?

Ja. Die Ausgabeformat-Tabs sind CSS, Tailwind, Framer Motion und anime.js. Sie alle formatieren dieselben vier Zahlen, wählen Sie also einen Tab und klicken Sie auf Kopieren, um das Snippet in die Zwischenablage zu legen.

Wie lade ich einen bestehenden Cubic-Bezier-Wert, um ihn zu bearbeiten?

Fügen Sie einen Wert wie cubic-bezier(.17, .67, .83, .67) in das Importfeld ein und klicken Sie auf Laden. Wenn vier Zahlen nicht gelesen werden können, erhalten Sie eine Fehlermeldung. Die Kurve wird auch in der Seiten-URL nach dem Hash gespeichert, sodass sie geteilt werden kann.

Warum fühlt sich die Vorschau langsamer an als meine echten Übergänge?

Die Bewegungsvorschau verwendet eine Dauer-Einstellung, die Sie ändern können, und die Standardwerte sind langsamer, damit Sie die Kurve studieren können. Verkürzen Sie die Dauer und verwenden Sie dann Wiederholen, um die Bewegung in der Geschwindigkeit zu sehen, mit der Sie sie einsetzen möchten.

Ist es wirklich kostenlos?

Ja. Jedes Tool ist kostenlos nutzbar, ohne Konto und ohne Kreditkarte. Die Verarbeitung läuft auf Ihrem Gerät statt auf unseren Servern – genau deshalb können wir den Dienst kostenlos betreiben.

Funktioniert es auf Mobilgeräten?

Ja. Es läuft in aktuellen mobilen Browsern unter iOS und Android, ohne dass etwas installiert werden muss.

📈

CSS-Cubic-Bezier-Easing-Generator – kostenlos

CSS-Easing-Kurven durch Verschieben von Kontrollpunkten gestalten, Bewegung live vorschauen und den cubic-bezier()-Wert kopieren. Enthält Überschreiten/Bounce-Voreinstellungen.

Läuft in Ihrem BrowserKein Konto, keine Pop-upsKeine Anmeldung erforderlichFür immer kostenlos

Funktioniert nach dem Laden offline

Türkise und rosa Griffe ziehen, um die Kurve zu formen

Kontrollpunkte

x1y1x2y2

Bewegungsvorschau

Dauer1,6 Sek.

Breitenübergang

CSS-Wert

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

Voreinstellungen

Die rosa und die türkisen Griffe können über oder unter die Box gezogen werden (Y außerhalb 0–1), um Überschwinger/Bouncing-Effekte wie back-out oder anticipate zu erzeugen. X bleibt innerhalb 0–1 (Zeit kann nicht umkehren).

Häufige Anwendungen

Benutzerdefiniertes CSS-ÜbergangseasingEntwerfen Sie natürlich wirkendes Easing für Hover-Effekte, Menüs und UI-Übergänge.
Sprung- und ÜberflussanimationenErstellen Sie verspielte Feder-/Sprungbewegung durch Ziehen von Kontrollpunkten über die Box hinaus.
Easing für @keyframes-AnimationenWählen Sie die richtige Animation-Timing-Funktion für CSS-Keyframe-Animationen.
Easing-Werte für JS-AnimationsbibliothekenErhalten Sie cubic-bezier-Werte für GSAP, Framer Motion, anime.js und mehr.
Verstehen Sie, wie Easing funktioniertSehen Sie die Beziehung zwischen einer Bézier-Kurve und der Bewegung, die sie erzeugt.

So funktioniert es

Der Editor ist vollständig im Browser mit React-State und SVG gebaut – keine Bibliothek übernimmt die Kurvenmathematik. Zwei verschiebbare Kontrollpunkte definieren einen kubischen SVG-Bézier-Pfad, und die CSS-Animations-Engine des Browsers führt die Bewegungsvorschau aus, indem der resultierende cubic-bezier()-Wert direkt in eine @keyframes-Regel eingesetzt wird.

1
Kontrollpunkte ziehen oder eintippen
Zwei Griffe (P1 in Türkis, P2 in Rosa) liegen auf einer SVG-Fläche. Das Ziehen nutzt die Pointer Events API mit setPointerCapture, sodass der Griff Ihrem Finger oder Cursor auch außerhalb der SVG-Grenze folgt. Sie können die Griffe auch mit den Pfeiltasten verschieben oder exakte Werte in die Zahlenfelder x1/y1/x2/y2 eingeben.
2
SVG zeichnet die Kurve in Echtzeit
Die Kurve ist ein einzelnes SVG-<path>-Element, dessen C-Befehl (kubische Bézierkurve) bei jeder Zustandsänderung aus den vier Kontrollpunktkoordinaten neu berechnet wird. Kein Canvas, keine externe Bibliothek – der SVG-Renderer des Browsers zeichnet den Pfad direkt.
3
Die CSS-Engine des Browsers zeigt das Easing in der Vorschau
Drei Live-Animationen (ein gleitender Punkt, ein Breitenübergang und eine Skalierung) führen CSS-@keyframes mit dem inline eingesetzten cubic-bezier()-Wert aus. Die Animations-Engine des Browsers interpretiert die Kurve selbst, sodass Sie genau das sehen, was Ihr Produktions-CSS erzeugen wird.
4
Snippet in der Syntax Ihres Frameworks kopieren
Tabs formatieren dieselben vier Zahlen als CSS-transition-timing-function, Tailwind-Klasse mit beliebigem Wert, Framer-Motion-ease-Array oder anime.js-Easing-String. Das Snippet wird mit navigator.clipboard in die Zwischenablage geschrieben. Die Kurve wird außerdem im URL-Hash kodiert (#b=x1,y1,x2,y2), sodass Sie sie teilen oder als Lesezeichen speichern können.

CSS-Cubic-Bezier-Easing-Generator – kostenlos

Häufige Anwendungen

So funktioniert es

Ähnliche Tools

Audio ein-/ausblenden

Untertitel-Editor

CSS-Grid-Generator

Häufige Fragen