Cubic-Bezier-Easing-Editor — CSS-Animationskurven

Cubic-Bezier-Easing-Editor — Gestalten Sie Sanfte CSS-Animationskurven

Gestalten Sie die perfekte Easing-Kurve für Ihre CSS-Animationen und -Übergänge. Ziehen Sie die beiden Kontrollpunkte, um die Kurve zu formen, sehen Sie zu, wie eine Kugel die Bewegung in Echtzeit wiedergibt, probieren Sie klassische Presets, und kopieren Sie die cubic-bezier()-Timing-Funktion direkt in Ihr Stylesheet.

Was ist eine Easing-Kurve?

Easing steuert, wie eine Animation während ihrer Dauer beschleunigt und abbremst. Statt sich mit konstanter Geschwindigkeit zu bewegen (linear), beschleunigt und verlangsamt sich Bewegung in der realen Welt. CSS drückt dies mit cubic-bezier(x1, y1, x2, y2) aus — vier Zahlen, die eine Kurve vom Anfang (0,0) bis zum Ende (1,1) über zwei Kontrollpunkte definieren.

So verwenden Sie es

• Ziehen Sie die rosa Griffe: jeder biegt die Kurve nahe dem Anfang oder dem Ende
• Beobachten Sie die Kugel: die Live-Vorschau spielt Ihr Easing in einer Schleife ab, um die Bewegung zu spüren
• Überschwingen: ziehen Sie einen Griff über oder unter die Box, um Bounce-/Anticipation-Effekte zu erzeugen (Werte außerhalb 0–1)
• Presets: starten Sie mit ease, linear, ease-in/out oder einem federnden Bounce
• Kopieren: holen Sie sich den fertigen cubic-bezier()-Wert

Die vier Zahlen verstehen

• x1, y1: der erste Kontrollpunkt — formt den Anfang der Animation
• x2, y2: der zweite Kontrollpunkt — formt das Ende
• Die X-Werte sind zwischen 0 und 1 gesperrt (Zeit läuft nicht rückwärts); die Y-Werte können diesen Bereich für Überschwingen überschreiten

Y-Werte außerhalb von 0–1 lassen die Animation überschwingen und erzeugen Sprung- oder Anlaufeffekte.

Wo das Ergebnis verwenden

Fügen Sie den Wert in jeden CSS-Übergang oder jede Animation ein, zum Beispiel: transition: transform 0.4s cubic-bezier(0.68, -0.55, 0.27, 1.55);. Es funktioniert auch mit animation-timing-function.

Datenschutz

Dieses Tool läuft vollständig in Ihrem Browser. Nichts wird hochgeladen oder gespeichert.