tas2580
Blog über Webentwicklung

CSS - transition-timing-function

Die transition-timing-function Eigenschaft gibt die Geschwindigkeitskurve des Übergangseffekts an.

Beispiel

div {
    transition-timing-function: linear;
}

Definition und Verwendung

Standard Wert:
ease
CSS Version:
CSS3
Vererbt sich:
Nein
Animierbar:
Nein
-webkit-:
-webkit-transition-timing-function
-moz-:
-moz-transition-timing-function
-o-:
-o-transition-timing-function

Browser Unterstützung

Chrome Nein
Firefox Nein
Safari Nein
Opera Nein
Edge Nein
IE Nein

Mögliche Werte

Der Eigenschaft können die hier aufgelisteten Werte zugewiesen werden.

Wert Beschreibung
cubic-bezier(Zahl, Zahl, Zahl, Zahl) Definiereeine eigene kubisch-Bezier-Funktion mit eigenen Werten. Mögliche Werte sind Zahlenwerte von 0 bis 1.
ease Standardwert. Gibt einen Übergangseffekt mit einem langsamen Start an der dann schnell wird und sich dann langsam zu beendet (äquivalent zu cubic-bezier(0.25,0.1,0.25,1)).
ease-in Gibt einen Übergangseffekt mit einem langsamen Start an (äquivalent zu cubic-bezier(0.42,0,1,1)).
ease-in-out Gibt einen Übergangseffekt mit einem langsamen Start und Ende an (äquivalent zu cubic-bezier(0.42,0,0.58,1)).
ease-out Gibt einen Übergangseffekt mit einem langsamen Ende an (äquivalent zu cubic-bezier(0,0,0.58,1)).
linear Gibt einen Übergangseffekt mit der gleichen Geschwindigkeit vom Anfang bis zum Ende an (äquivalent zu cubic-bezier(0,0,1,1)).
step-end Entspricht steps(1, end).
step-start Entspricht steps(1, start).
steps(Zahl,start|end) Gibt eine Schrittfunktion mit zwei Parametern an. Der erste Parameter gibt die Anzahl der Intervalle der Funktion an. Es muss eine positive ganze Zahl (größer als 0) sein. Der zweite Parameter ist optional, dort wird entweder der Wert "start" oder "end" angegeben. Er gibt den Punkt an, an dem die Änderung der Werte innerhalb des Intervalls auftreten. Wenn der zweite Parameter weggelassen wird, wird es den Wert "end" verwendet.
initial Setzt diese Eigenschaft auf den Standardwert.
inherit Erbt diese Eigenschaft von seinem übergeordneten Element.