📈 CSS cubic-bezier Editor

Bearbeiten Sie cubic-bezier, indem Sie zwei Kontrollpunkte ziehen. Bestätigen Sie die Bewegung mit der Vorschau-Animation.

100% Free No signup Browser-only 5 languages Dark mode

🔒 Über Datenschutz

・Die gesamte Verarbeitung erfolgt im Browser
・Eingabedaten werden unter keinen Umständen an den Server gesendet
・Keine Speicherlogs · Verlauf · Datenbank etc.
・Keine Registrierung, Anmeldung oder Abrechnung erforderlich

Ziehen Sie die blauen und rosa Punkte, um die Kurve zu bearbeiten

Vorschau

Voreinstellung

CSS

📖 Wie man es benutzt

1

Drag the control points

Drag the blue and pink points to reshape the curve. The curve becomes the timing function.
2

Preview the motion

Press Play to animate the red dot and see the actual easing.
3

Copy the CSS

Copy the generated transition / animation snippet and paste into your CSS.

❓ Häufig gestellte Fragen

Is my data sent to your server?

No. Everything runs in your browser. You can verify in the Network tab.

Can Y values go outside the 0-1 range?

Yes. Y can exceed 0-1 for bounce or overshoot effects. X must stay within 0-1.

Where can I use this?

Use it in CSS transition-timing-function and animation-timing-function properties.

🔗 Verwandte Tools

🐛 Sind Sie auf ein Problem mit diesem Tool gestoßen?

Vollständig kostenlos und ohne Registrierung. Auch Reproduktionsschritte sind ausreichend. Eingegangene Berichte werden direkt an die Betreiber weitergeleitet und dienen als Referenz für Korrektionen.