cubic-bezier-Kurven

So funktioniert es

1. Eine benannte Kurve wählen oder vier Zahlen eintippen.
2. Die Tabelle lesen: wie weit die Bewegung nach jedem Zehntel der Zeit ist.
3. Die Dauer auf die einstellen, über die Sie tatsächlich animieren, damit die Millisekunden etwas bedeuten.
4. Die Zeitfunktion kopieren.

Häufige Fragen

Warum eine Tabelle statt einer gezeichneten Kurve?

Weil die Frage fast immer lautet „ist es am Anfang zu langsam“ oder „kommt es zu abrupt an“, und eine Tabelle von Fortschritt gegen Zeit beantwortet genau das. Eine gezeichnete Kurve sieht hübsch aus und lässt einen die Millisekunden weiter schätzen.

Was bedeuten die vier Zahlen?

Zwei Kontrollpunkte: x1, y1, x2, y2. Die x-Werte sind Zeit und müssen zwischen 0 und 1 liegen. Die y-Werte sind Fortschritt und dürfen darüber hinausgehen – genau das lässt eine Kurve überschießen und zurückfedern.

Welche soll ich nehmen?

Für etwas, das hereinkommt, ease-out: schnell zu Beginn, am Ende auslaufend. Für etwas, das hinausgeht, ease-in. ease-in-out für einen Wechsel zwischen zwei Orten. Linear für einen Ladekreis und sonst fast nie.

Was ist eine back-Kurve?

Eine, die über das Ziel hinausschießt und zurückkommt – der kleine Nachschwinger, der einen Dialog körperlich wirken lässt. Für kleine, schnelle Bewegungen; bei einer großen liest er sich als Fehler.

Wird etwas an einen Server geschickt?

Nein. Es läuft im Browser, was Sie eingeben, bleibt auf Ihrem Rechner.