Tools · CSS · Cubic-Bezier-Easing-Generator
Cubic-Bezier-Easing-Generator
Ziehe eine Kurve, um einen cubic-bezier()-Easing-Wert zu erstellen, sieh sie mit einem echten CSS-Übergang live abspielen, und kopiere den Code.
Füge eine Datei hinzu und starte das Tool.
Deine Datei ist bereit.
Versuch eine andere Datei, oder versuch es erneut.
Einstellungen
Passe die Einstellungen unten an. Das Ergebnis aktualisiert sich dabei.
Läuft komplett im Browser. Es wird nichts hochgeladen.
Läuft komplett im Browser. Nichts wird je auf einen Server hochgeladen.
So funktioniert es
Ziehe die Kurve, oder gib die vier X/Y-Zahlen direkt ein.
Sieh dir die Live-Bewegungsdemo an - sie führt einen echten CSS-Übergang mit deiner Kurve aus.
Kopiere den erzeugten cubic-bezier()-Wert.
Häufige Fragen
Das verlangt CSS so - x ist die Zeit, die weder zurücklaufen noch über das Ende des Übergangs hinausgehen kann. y ist der interpolierte Wert, der legitim über 1 hinausschießen oder unter 0 fallen kann - genau das gibt Federn- oder "Back"-Kurven ihr Gefühl.
Nein. Die Kurve, das Diagramm und die Bewegungsdemo werden vollständig in deinem Browser erzeugt und angezeigt.
Ja. Derselbe cubic-bezier()-Wert funktioniert in beiden Eigenschaften.
Die echte Sache. Der Demo-Punkt bewegt sich unter einem echten CSS-Übergang mit genau deinem cubic-bezier()-Wert als Timing-Funktion, nicht mit einer handgeschriebenen Annäherung der Mathematik.
Anleitungen
Ein genauerer Blick auf einzelne Probleme, die dieses Tool löst.
Why Easing Matters More Than Duration in UI Animation
Two transitions with the same duration can feel quick or sluggish depending only on their timing curve. What a cubic-bezier curve actually describes, and why the right one makes an interface feel responsive.
Anleitung lesenHow to Create a Custom cubic-bezier() Easing Curve for CSS
Start from a preset, drag the two handles, compare the motion against linear and ease at the duration you will really use, and copy both the value and a ready transition line. The steps, with the limits the tool really has.
Anleitung lesenAn Overshoot Menu Animation With ease-out-back, and Its Two Bugs
An ease-out-back curve makes a dropdown pop open and settle. It also makes the menu overshoot on the way closed, does nothing on opacity, and can poke out of a clipped container. The whole job, with the fixes.
Anleitung lesen
Kommentare