Cubic-Bezier-Generator
Der Cubic-Bezier-Generator gestaltet Easing-Kurven mit ziehbaren Punkten, bietet Vorlagen von ease-in-out bis easeOutBack und vergleicht die Bewegung in einer Vorschau.
Alles läuft in Ihrem Browser. Eingaben verlassen Ihr Gerät nicht.
cubic-bezier und Easing
Der Cubic-Bezier-Generator zeichnet die Kurve einer Easing-Funktion und lässt Sie die beiden Kontrollpunkte mit Maus, Finger oder Pfeiltasten verschieben. Die Funktion cubic-bezier(x1, y1, x2, y2) beschreibt, wie schnell eine CSS-Animation oder ein Übergang über die Zeit fortschreitet: waagerecht die Zeit, senkrecht der Fortschritt. Start- und Endpunkt liegen fest bei 0,0 und 1,1, Sie bestimmen nur die beiden Punkte dazwischen.
Die x-Werte müssen zwischen 0 und 1 liegen, die y-Werte dürfen darüber hinausgehen. Werte über 1 lassen die Bewegung über das Ziel hinausschießen und zurückfedern, Werte unter 0 holen vorher aus. Die CSS-Schlüsselwörter sind Abkürzungen für feste Kurven: ease entspricht cubic-bezier(0.25, 0.1, 0.25, 1), ease-in-out entspricht cubic-bezier(0.42, 0, 0.58, 1). Weitere Vorlagen wie easeOutCubic oder easeInOutBack stammen aus verbreiteten Easing-Sammlungen.
Verwenden Sie den Wert in transition-timing-function, animation-timing-function oder direkt in der Kurzschreibweise transition. Die Vorschau lässt eine Kugel mit Ihrer Kurve neben einer Vergleichskurve laufen. Als Faustregel wirken Elemente, die erscheinen, mit ease-out natürlich, und Elemente, die verschwinden, mit ease-in. Komplette Animationen mit Keyframes baut der CSS-Animation-Generator.
Anleitung: Cubic-Bezier-Generator in 4 Schritten
- Unter „Vorlage“ eine Kurve wie ease-in-out oder easeOutBack wählen oder mit „eigene Kurve“ beginnen.
- Die beiden Kontrollpunkte im Diagramm ziehen oder x1, y1, x2 und y2 als Zahlen eintragen.
- Die Dauer der Vorschau einstellen, eine Vergleichskurve wählen und mit „Abspielen“ die Bewegung ansehen.
- Den CSS-Code kopieren und in transition oder animation einsetzen.
Typische Anwendungsfälle
- Menüs und Dialoge: Eine ease-out-Kurve für Elemente finden, die natürlich hereingleiten.
- Verspielte Buttons: Mit y-Werten über 1 eine leicht überschießende Bewegung gestalten.
- Design-Vorgaben umsetzen: Eine im Design festgelegte Kurve als cubic-bezier-Wert nachbauen und prüfen.
- Animationen abstimmen: Mehrere Übergänge einer Seite mit derselben Kurve einheitlich wirken lassen.
Häufige Fragen
Was bedeuten die vier Zahlen in cubic-bezier()?
Es sind die Koordinaten der beiden Kontrollpunkte: x1 und y1 für den ersten, x2 und y2 für den zweiten. x ist die Zeit, y der Fortschritt der Bewegung. Start und Ende liegen fest bei 0,0 und 1,1.
Warum dürfen y-Werte größer als 1 sein?
Damit die Bewegung über das Ziel hinausschießen und zurückfedern kann. Die x-Werte müssen dagegen zwischen 0 und 1 liegen, weil die Zeit nicht rückwärts laufen darf; sonst ist der Wert ungültig.
Welche Kurve entspricht ease-in-out?
cubic-bezier(0.42, 0, 0.58, 1). ease ist cubic-bezier(0.25, 0.1, 0.25, 1), ease-in ist cubic-bezier(0.42, 0, 1, 1) und ease-out ist cubic-bezier(0, 0, 0.58, 1).
Wo setze ich die Easing-Funktion ein?
In transition-timing-function, animation-timing-function oder in der Kurzschreibweise, etwa transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1). Bei Animationen gilt sie für jeden Abschnitt zwischen zwei Keyframes.
Was ist der Unterschied zu steps() und linear()?
steps() springt in festen Stufen, etwa für Sprite-Animationen. Die neuere Funktion linear() mit mehreren Stützpunkten kann beliebige Verläufe wie Federn annähern, die mit einer einzelnen Bézierkurve nicht möglich sind.
Wie verwende ich cubic-bezier in JavaScript-Animationen?
Die Web Animations API akzeptiert denselben Wert als easing, etwa element.animate(keyframes, { duration: 400, easing: 'cubic-bezier(0.34, 1.56, 0.64, 1)' }). Auch viele Animationsbibliotheken nehmen die vier Zahlen direkt an.
Welche Easing-Kurve wirkt am natürlichsten?
Für erscheinende Elemente wirken ease-out-Kurven wie easeOutCubic natürlich, weil sie schnell starten und sanft abbremsen. Für das Ausblenden passt ease-in, für Bewegungen von A nach B ease-in-out.
Das könnte auch helfen
Farbumwandler
HEX, RGB, HSL, HSV, CMYK und OKLCH ineinander umrechnen, mit Farbwähler, Vorschau und Farbtönen.
ÖffnenFarbpalette aus Bild
Die wichtigsten 5 bis 10 Farben eines Bildes als HEX-Codes ermitteln, lokal im Browser.
ÖffnenKontrast prüfen (WCAG)
Kontrastverhältnis zweier Farben nach WCAG prüfen, AA und AAA, mit Vorschlag für passende Farbtöne.
ÖffnenCSS-Gradient-Generator
Linearen, radialen und konischen Farbverlauf zusammenstellen und den CSS-Code kopieren.
ÖffnenBox-Shadow-Generator
CSS-Schatten mit mehreren Ebenen, inset und Deckkraft einstellen, Vorschau sehen, Code kopieren.
ÖffnenFlexbox-Generator
Flexbox-Eigenschaften per Auswahl setzen, die Wirkung live sehen und das CSS kopieren.
Öffnen