CSS - animation-timing-function
Die animation-timing-function Eigenschaft gibt die Geschwindigkeitskurve einer Animation an.
Beispiel
div {
animation-timing-function: linear;
}
Definition und Verwendung
Die Geschwindigkeitskurve definiert die Zeit die eine Animation zu wechseln aus einem Satz von CSS-Stilen zu einem anderen braucht.
- Standard Wert:
- ease
- CSS Version:
- CSS3
- Vererbt sich:
- Nein
- Animierbar:
- Nein
- -webkit-:
- -webkit-animation-timing-function
- -moz-:
- -moz-animation-timing-function
- -o-:
- -o-animation-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(n,n,n,n) | Definiert eigene Werte in der kubisch-Bezier-Funktion Mögliche Werte sind Zahlenwerte von 0 bis 1. |
| ease | Standardwert. Die Animation hat einen langsamen Start, wird dann schnell, bevor sie langsam endet. |
| ease-in | Die Animation hat einen langsamen Start. |
| ease-in-out | Die Animation hat sowohl einen langsamen Start und ein langsames Ende. |
| ease-out | Die Animation hat eine langsames Ende. |
| linear | Die Animation hat die gleiche Geschwindigkeit von Anfang bis Ende. |
| 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 in der Funktion an. Er muss eine positive ganze Zahl (größer als 0) sein. Dem zweiten Parameter, der optional ist, wird entweder der Wert "start" oder "end" zugewiesen, er gibt den Punkt an, an dem die Änderung der Werte innerhalb des Intervalls auftreten. Wenn der zweite Parameter weggelassen wird, wird der Wert "end" verwendet. |
| initial | Setzt diese Eigenschaft auf den Standardwert. |
| inherit | Erbt diese Eigenschaft von seinem übergeordneten Element. |