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. |