Kategorie: Entwicklung
Cubic-Bezier-Generator
Gestalten Sie eine eigene CSS-Übergangskurve
Ziehen Sie zwei Kontrollpunkte, um eine cubic-bezier()-Timing-Funktion zu formen, beobachten Sie, wie sich Kurve und eine bewegte Vorschau live aktualisieren, und kopieren Sie die fertige animation-timing-function-Deklaration. Die Kurve wird in Ihrem Browser berechnet.
Fortschritt bei 50 % der Dauer: 0.802
animation-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1);
Alles auf dieser Seite wird in Ihrem Browser verarbeitet. Nichts wird hochgeladen.
Wozu dieses Werkzeug dient
Das Easing eines CSS-Übergangs oder einer -Animation ist eine kubische Bezierkurve von (0,0) nach (1,1): Die beiden Punkte dazwischen entscheiden, ob die Bewegung langsam beginnt und schnell endet, überschießt oder sich anders verhält. Die benannten Schlüsselwörter (ease, ease-in-out und so weiter) sind nur fünf feste Punkte in diesem Raum. Dieses Tool zeichnet die Kurve aus den beiden von Ihnen festgelegten Kontrollpunkten, zeigt eine Box, die sich mit genau dieser Timing-Funktion bewegt, und gibt an, wie weit der geglättete Fortschritt bei der Hälfte der Zeit angekommen ist – die Zahl, die sich aus der Kurve allein am schwersten ablesen lässt.
So funktioniert es
- Starten Sie mit einer Voreinstellung oder legen Sie die beiden Kontrollpunkte direkt fest.
- Beobachten Sie, wie sich Kurve und bewegte Vorschau aktualisieren.
- Kopieren Sie die cubic-bezier()-Deklaration in Ihren Übergang oder Ihre Animation.
Datenschutz
Dieses Werkzeug läuft vollständig in Ihrem Browser. Ihre Eingabe wird nie hochgeladen, gespeichert oder weitergegeben – beim Schließen des Tabs ist sie weg.
Häufig gestellte Fragen
- Wird irgendetwas auf einem Server berechnet?
- Nein. Die Kurve, die bewegte Vorschau und der Fortschrittswert werden alle von JavaScript berechnet, das auf der Seite läuft.
- Warum sind die beiden X-Werte auf einen Bereich zwischen 0 und 1 begrenzt?
- X steht für die verstrichene Zeit, die laut CSS-Spezifikation von 0 bis 1 vorwärts laufen muss, damit die Kurve eine gültige Funktion der Zeit bleibt. Y ist der geglättete Fortschritt und darf unter 0 oder über 1 gehen, wodurch ein Überschießen oder ein Abprallen entsteht.
- Was bedeutet der Wert bei der Hälfte der Zeit?
- Er ist der geglättete Fortschritt – nicht der lineare Fortschritt – in dem Moment, in dem genau die Hälfte der Animationsdauer verstrichen ist. Ein Wert über 50 % bedeutet, dass die Bewegung zur Mitte hin bereits einem linearen Tempo voraus ist.