Die wahren Zahlen hinter CSS-Easy-In-Out
Entwerfen Sie eine benutzerdefinierte CSS-Cubic-Bezier()-Timing-Funktion, indem Sie zwei Kontrollpunkte ziehen, eine Live-Vorschau anhand einer linearen Referenz anzeigen und dann den fertigen Wert kopieren.
Ergebnis
Auf dieser Seite wird der kubische Bézier-Generator geöffnet, wobei x1=0,42, y1=0, x2=0,58, y2=1 bereits geladen ist – die genauen Kontrollpunkte, auf die das CSS-Schlüsselwort „ease-in-out“ erweitert wird. Ziehen Sie einen der Griffe oder bearbeiten Sie die Zahlen direkt, und die Kurve, die Animationsvorschau und die kopierbare Zeichenfolge werden sofort aktualisiert.
„ease-in-out“ ist eines der fünf integrierten CSS-Timing-Schlüsselwörter und gerade deshalb beliebt, weil diese Kurve vom Anfang an sanft beschleunigt, in der Mitte ein ziemlich gleichmäßiges Tempo beibehält und vor dem Ende wieder nachlässt – eine Form, die für die meisten UI-Bewegungen als natürlich erscheint. Wenn man es als explizite Kontrollpunkte und nicht als Schlüsselwortnamen betrachtet, wird deutlich, warum: y1 liegt in der Nähe von 0 und y2 in der Nähe von 1, beide nahe an ihrem passenden x, sodass es in keiner Richtung zu einem Überschwingen kommt.
Verwenden Sie diese vier Zahlen als Ausgangspunkt und nicht das Schlüsselwort selbst, wenn Sie das Gefühl leicht verändern müssen – ziehen Sie x1 nach unten für einen schnelleren Start oder drücken Sie y2 über 1, um dieselbe Form in ein sanftes Überschwingen zu verwandeln. Bei jeder Änderung werden die Vorschau und die kopierbare Zeile „cubic-bezier()“ sofort aktualisiert.