Zum Inhalt springen

transition-timing-function

  • Redaktion 
  • Zuletzt aktualisiert am

#transition-timing-function

Legt fest, wie die Werte zwischen dem Start und dem Ende des Übergangs berechnet werden.

default transition-timing-function: ease;

Der Übergang beginnt langsam, beschleunigt sich in der Mitte und verlangsamt sich am Ende.

transition-timing-function: ease-in;

Der Übergang beginnt langsam und beschleunigt sich allmählich bis zum Ende.

transition-timing-function: ease-out;

Der Übergang beginnt schnell und verlangsamt sich allmählich bis zum Ende.

transition-timing-function: ease-in-out;

Wie ease, aber ausgeprägter.

Der Übergang beginnt schnell und verlangsamt sich allmählich bis zum Ende.

transition-timing-function: linear;

Der Übergang hat eine konstante Geschwindigkeit.

transition-timing-function: step-start;

Der Übergang springt sofort in den Endzustand.

transition-timing-function: step-end;

Der Übergang bleibt im Anfangszustand bis zum Ende, wenn er sofort in den Endzustand springt.

transition-timing-function: steps(4, end);

Durch die Verwendung von steps() mit einer Ganzzahl kann man eine bestimmte Anzahl von Schritten definieren, bevor man das Ende erreicht. Der Zustand des Elements ändert sich nicht allmählich, sondern springt von Zustand zu Zustand in einzelnen Augenblicken.