Ziehe zwei Griffe, um eine cubic-bezier()-Easing-Kurve zu formen, lass sie gegen linear und ease antreten, starte mit den Schlüsselwörtern der Spezifikation oder Tailwind-Presets und kopiere CSS oder eine Tailwind-Klasse.
Eine Easing-Kurve cubic-bezier(x1, y1, x2, y2) verläuft von 0,0 nach 1,1 und wird von zwei Kontrollpunkten gebogen. Beide x-Werte müssen zwischen 0 und 1 bleiben, sonst verwirft der Browser die ganze Deklaration, während y-Werte unter 0 oder über 1 gehen dürfen, um über das Ziel hinauszuschießen. Ziehe die Griffe unten und sieh den Punkten beim Wettrennen zu.
Die CSS-Easing-Schlüsselwörter als cubic-bezier()-Werte (CSS Easing Functions Level 1)
Schlüsselwort
cubic-bezier()-Wert
Wirkt wie
cubic-bezier(0, 0, 1, 1)
Konstante Geschwindigkeit, mechanisch
ease (der Standard)
cubic-bezier(0.25, 0.1, 0.25, 1)
Schneller Start, langer sanfter Halt
cubic-bezier(0.42, 0, 1, 1)
Langsamer Start, abrupter Halt
cubic-bezier(0, 0, 0.58, 1)
Schneller Start, weiche Landung
cubic-bezier(0.42, 0, 0.58, 1)
Weich an beiden Enden
Vier Zahlen eintippen und raten, wie sie sich anfühlen werden, klappt selten. Hier formst du die Kurve von Hand, siehst die Zahlen mitlaufen und vergleichst die Bewegung direkt mit einer geraden Linie und dem Browser-Standard, bevor du etwas in dein Stylesheet einfügst.
Ziehe die blauen und pinken Griffe im Diagramm oder tippe exakte Zahlen in die vier Felder. Die x-Felder werden auf den Bereich 0 bis 1 begrenzt.
Drück auf Abspielen, um drei Punkte gleichzeitig über die Strecke zu schicken: deine Kurve, linear und ease.
Wähle ein Preset, um mit den Schlüsselwörtern der Spezifikation, den Tailwind-Standards oder einer unserer Overshoot-Kurven zu starten.
Kopiere die CSS-Deklaration oder die Tailwind-Arbitrary-Klasse.
Nutze ease-out für Elemente, die ins Bild kommen, und ease-in für Elemente, die es verlassen. Elemente, die sich zwischen zwei Stellen auf dem Bildschirm bewegen, sehen mit ease-in-out meist am besten aus.
Ein y1 über 1 lässt die Bewegung über ihr Ziel hinausschießen und zurückfedern. Halte den Overshoot bei Interface-Bewegungen klein, etwa 1.2 bis 1.6.
Kurze Dauern verbergen Unterschiede zwischen Kurven. Beurteile eine Kurve bei 600 Millisekunden oder mehr und verkürze sie dann.
Respektiere Menschen, die weniger Bewegung wünschen: Pack große Bewegungen in @media (prefers-reduced-motion: no-preference).
Häufige Fragen
Was bedeuten die vier Zahlen in cubic-bezier()?
Sie sind die Koordinaten der beiden Kontrollpunkte: x1 und y1 für den ersten, x2 und y2 für den zweiten. Die x-Achse ist der bereits verstrichene Anteil der Dauer, und die y-Achse zeigt, wie weit der animierte Wert fortgeschritten ist.
Warum wird mein cubic-bezier ignoriert?
Ist einer der x-Werte kleiner als 0 oder größer als 1, ist die Funktion ungültig, und der Browser verwirft die Deklaration und greift auf den vorher geltenden Wert zurück. Prüfe, ob x1 und x2 zwischen 0 und 1 liegen.
Sind ease-in und ease-out von Tailwind dasselbe wie die CSS-Schlüsselwörter?
Nein. Das Standard-Theme von Tailwind definiert ease-in als cubic-bezier(0.4, 0, 1, 1), ease-out als cubic-bezier(0, 0, 0.2, 1) und ease-in-out als cubic-bezier(0.4, 0, 0.2, 1), was von den gleichnamigen CSS-Schlüsselwörtern abweicht. Beide Sätze sind im Editor als Presets enthalten, damit du sie vergleichen kannst.
Wie nutze ich eine eigene Kurve in Tailwind?
Schreib den Wert ohne Leerzeichen in eckige Klammern, zum Beispiel ease-[cubic-bezier(0.34,1.56,0.64,1)]. Um ihn wiederzuverwenden, deklarierst du eine Theme-Variable wie --ease-springy in @theme, und Tailwind erzeugt eine Klasse ease-springy.
Kann eine Bezier-Kurve einen Bounce mit mehreren Sprüngen erzeugen?
Nein. Eine kubische Kurve kann einmal überschießen und zurückkommen, aber nicht mehrmals springen. Für einen Bounce mit mehreren Sprüngen nutzt du @keyframes mit mehreren Schritten oder die neuere Funktion linear(), die eine Liste von Punkten akzeptiert.
Das Diagramm lesen
Die Zeit läuft von links nach rechts, der Fortschritt von unten nach oben. Ein steiler Abschnitt der Kurve bedeutet schnelle Bewegung, ein flacher Abschnitt, dass sich das Element kaum bewegt. Die Linie von Ecke zu Ecke ist lineare Bewegung.
Griffe über der oberen oder unter der unteren Kante schieben den Fortschritt kurz über 100 Prozent oder unter 0 Prozent. So erreichst du einen sanften Overshoot, ohne Keyframes zu schreiben.
Wo die Kurve im CSS hingehört
Derselbe Wert funktioniert in transition-timing-function, animation-timing-function und den Kurzschreibweisen transition und animation. Innerhalb von @keyframes gilt eine an einem Keyframe gesetzte Timing-Funktion nur für den Abschnitt bis zum nächsten Keyframe.
Manche Eigenschaften können nicht unter null fallen, etwa opacity oder eine Breite. Schießt eine Kurve unter 0, werden diese Werte begrenzt, und die Delle ist einfach nicht zu sehen.
Preset-Werte
Die ersten fünf stammen aus der Spezifikation CSS Easing Functions. Die Tailwind-Zeilen sind das Standard-Theme dieses Frameworks. Die Overshoot-Zeilen sind Ausgangspunkte, die wir nach Augenmaß abgestimmt haben.
Jedes Preset im Editor
Name
Quelle
Wert
CSS-Schlüsselwort
cubic-bezier(0, 0, 1, 1)
CSS-Schlüsselwort
cubic-bezier(0.25, 0.1, 0.25, 1)
CSS-Schlüsselwort
cubic-bezier(0.42, 0, 1, 1)
CSS-Schlüsselwort
cubic-bezier(0, 0, 0.58, 1)
CSS-Schlüsselwort
cubic-bezier(0.42, 0, 0.58, 1)
ease-in (Tailwind)
Tailwind-Standard
cubic-bezier(0.4, 0, 1, 1)
ease-out (Tailwind)
Tailwind-Standard
cubic-bezier(0, 0, 0.2, 1)
ease-in-out (Tailwind)
Tailwind-Standard
cubic-bezier(0.4, 0, 0.2, 1)
federnd raus
Overshoot
cubic-bezier(0.34, 1.56, 0.64, 1)
Overshoot
cubic-bezier(0.6, -0.4, 0.4, 1.4)
Overshoot
cubic-bezier(0.2, 0.9, 0.3, 1.1)
Eine eigene Kurve verwenden
Hover-Karte mit Overshoot
Fahr mit der Maus über die Karte. Sie hebt sich leicht über ihre Ruheposition hinaus und pendelt sich ein, allein durch die Timing-Funktion.
Tailwind: einmalige Klasse und wiederverwendbarer Theme-Token
Die Klammerschreibweise kommt ohne Leerzeichen aus. Die @theme-Variable macht aus der Kurve eine benannte Klasse.
Editor für Easing-Kurven
Ziehe die Griffe oder tippe Werte ein, drück auf Abspielen, um deine Kurve gegen linear und ease antreten zu lassen, und kopiere dann CSS oder die Tailwind-Klasse.
CSS-Schlüsselwort
CSS-Schlüsselwort
CSS-Schlüsselwort
CSS-Schlüsselwort
CSS-Schlüsselwort
Tailwind-Standard
Tailwind-Standard
Tailwind-Standard
Overshoot
Overshoot
Overshoot
Diagramm der Easing-Kurve. Ziehe die beiden Griffe, um die Kurve zu ändern.
Erster Kontrollpunkt
Zweiter Kontrollpunkt
Easing-Presets
Dauer: {n} ms
Abspielen
Deine Kurve
CSS kopieren
Tailwind-Klasse kopieren
Diese Kurve entspricht dem CSS-Schlüsselwort {v}.
x-Werte bleiben zwischen 0 und 1. y-Werte dürfen überschießen.