CSS-Cubic-Bezier-Generator

Was ist CSS-Cubic-Bezier-Generator?

Der CSS-Cubic-Bezier-Generator ist ein kostenloser visueller Editor für die Easing-Funktionen, die CSS-Übergänge und -Animationen verwenden, gebaut für Frontend-Entwickler und Motion-Designer. Im cubic-bezier-Modus ziehst du zwei Kontrollpunkte (oder tippst sie ein), um eine Kurve zu formen: Die x-Werte bleiben im zulässigen Bereich 0–1, während die y-Werte über 1 hinaus oder unter 0 gehen können, um Overshoot und Anticipation zu erzeugen. Ein steps()-Modus deckt gestufte Zeitsteuerung mit einstellbarer Schrittanzahl und einem Sprungterm ab – jump-start, jump-end, jump-none oder jump-both, wobei step-start und step-end steps(1, …) sind. Eine Live-Animationsvorschau spielt die aktuelle Easing auf einer Box ab, die sich für eine von dir festgelegte Dauer bewegt und skaliert, du kannst jedes Preset als Geisterkurve überlagern und einen vorhandenen cubic-bezier()- oder steps()-String importieren. Kopiere die exakte Deklaration für deine transition-timing-function oder animation-timing-function.

So verwendest du CSS-Cubic-Bezier-Generator

1. Wähle oben den cubic-bezier()- oder steps()-Modus, oder öffne die Einstellungen, um mit einem Preset wie ease, ease-in-out oder linear zu starten.
2. Ziehe im cubic-bezier-Modus die zwei Griffe im Diagramm oder gib exakte x1-, y1-, x2- und y2-Werte ein; schiebe y über 1 für Overshoot.
3. Lege im steps()-Modus die Schrittanzahl fest und wähle einen Sprungterm (jump-start, jump-end, jump-none oder jump-both), um die Treppe zu zeichnen.
4. Drücke Wiedergabe, um die Live-Animation auf der sich bewegenden, skalierenden Box laufen zu lassen, und passe die Dauer in Sekunden an, um das Timing zu spüren.
5. Wähle in den Einstellungen eine Vergleichskurve, um ein Preset als Geist im selben Diagramm zu überlagern, oder füge einen Wert in Importieren ein und wende ihn an.
6. Kopiere den erzeugten cubic-bezier()- oder steps()-Wert in deine transition-timing-function oder animation-timing-function.

Beispiele

x1 0.25, y1 0.1, x2 0.25, y2 1

cubic-bezier(0.25, 0.1, 0.25, 1)

x1 0.34, y1 1.56, x2 0.64, y2 1

cubic-bezier(0.34, 1.56, 0.64, 1)

steps-Modus, N 4, jump-end

steps(4, jump-end)

Häufig gestellte Fragen

Was bedeuten die vier cubic-bezier-Zahlen?

Es sind die Koordinaten der zwei Kontrollpunkte: x1, y1 für den ersten Punkt und x2, y2 für den zweiten. Die Kurve beginnt immer bei (0,0) und endet bei (1,1); die Kontrollpunkte biegen sie dazwischen, was steuert, wie die animierte Eigenschaft im Zeitverlauf beschleunigt und abbremst.

Wofür ist der steps()-Modus?

steps() springt zwischen einer festen Anzahl von Werten, statt sanft zu interpolieren – praktisch für Sprite-Animationen, tickende Zähler oder Bild-für-Bild-Effekte. Lege die Schrittanzahl und einen Sprungterm fest: jump-start, jump-end, jump-none oder jump-both. step-start entspricht steps(1, jump-start) und step-end entspricht steps(1, jump-end).

Wie funktioniert die Live-Animationsvorschau?

Drücke Wiedergabe und die Box bewegt sich über die Bahn und skaliert mit deiner aktuellen Easing, hin und her wiederholend. Ändere die Dauer in Sekunden, um sie zu verlangsamen oder zu beschleunigen; sie verwendet reine CSS-Animation mit deinem cubic-bezier()- oder steps()-Wert als Timing-Funktion.

Kann ich einen vorhandenen Easing-Wert importieren?

Ja. Füge einen cubic-bezier(...)- oder steps(...)-Wert – oder ein Schlüsselwort wie ease-in-out, step-start oder step-end – in das Feld Importieren ein und wende ihn an; der Editor analysiert ihn zurück in die Kontrollpunkte oder Schritteinstellungen.

Werden meine Daten an einen Server gesendet?

Nein. Der gesamte Editor läuft mit JavaScript in deinem Browser – die Kontrollpunkte und die Kurve werden lokal berechnet und nie hochgeladen, sodass er privat und nach dem Laden der Seite sogar offline funktioniert.