CSS-Cubic-Bezier-Editor
Zeige Easing-Kurven in der Vorschau an und exportiere Timing-Funktionen.
So verwendest du CSS-Cubic-Bezier-Editor
CSS cubic Bezier editor builds a cubic-bezier() timing function from two control points and animates a ball with it so you can see the easing. The x values range from 0 to 1, the y values from -3 to 3 for overshoot or anticipation, and the preview duration from 0.1 to 10 seconds. Download the result as a transition-timing-function rule in easing.css.
- Gib die angeforderten Werte im Einstellungsbereich ein.
- Passe die Grundeinstellungen an und öffne dann den Erweiterten Modus für Export- und Feinabstimmungsoptionen. Benutzerdefinierte Einstellungen bleiben aktiv, wenn das Panel geschlossen wird.
- Führe den CSS-Cubic-Bezier-Editor aus, prüfe die Ausgabe und verwende dann die verfügbaren Bedienelemente zum Kopieren oder Herunterladen.
Was dieses Tool unterstützt
Zeige Easing-Kurven in der Vorschau an und exportiere Timing-Funktionen.
- Kontrollpunkt x1
- Range: 0 to 1
- Kontrollpunkt y1
- Range: -3 to 3
- Kontrollpunkt x2
- Range: 0 to 1
- Kontrollpunkt y2
- Range: -3 to 3
- Vorschaudauer (Sekunden)
- Range: 0.1 to 10
Grenzen und Verarbeitung
Bilder unterliegen der bestehenden Canvas-Grenze von 32 Megapixeln. Wo unterstützt, sind bis zu 100 Quellbilder zulässig. Eingefügtes HTML ist auf 200.000 Zeichen begrenzt; Mermaid-Diagramme auf 20.000 Zeichen und 300 Zeilen. Die SVG- und PNG-Erzeugung erfordert einen Browser.
Häufige Fragen
Why are the x values limited to 0 to 1 in cubic-bezier?
CSS requires both x coordinates to stay between 0 and 1 so time always moves forward; values outside that range make the function invalid. The y values can go beyond that range, and this editor accepts -3 to 3.
How do I make a bounce or overshoot easing curve?
Set y2 above 1, for example 1.5, so the motion passes the end point before settling, or set y1 below 0 to pull back before starting. The ball preview loops back and forth so you can judge the effect.
Does the easing preview respect reduced motion settings?
Yes. When your system requests reduced motion, the preview animation is turned off. The cubic-bezier value is still generated and downloadable; change the setting temporarily if you need to watch the curve in motion.
Wo wird meine Eingabe verarbeitet?
Dieser Vorgang verarbeitet seine Quelle in deinem Browser. Kopieren und Herunterladen sind ausdrückliche Aktionen; die Quelleingabe wird nicht in einem Konto oder Verlauf gespeichert.
Welche Eingabelimits gelten?
Bilder unterliegen der bestehenden Canvas-Grenze von 32 Megapixeln. Wo unterstützt, sind bis zu 100 Quellbilder zulässig. Eingefügtes HTML ist auf 200.000 Zeichen begrenzt; Mermaid-Diagramme auf 20.000 Zeichen und 300 Zeilen. Die SVG- und PNG-Erzeugung erfordert einen Browser.