CSS-animation-timing-function-Eigenschaft

Definition und Verwendung

animation-timing-function Bestimme die Geschwindigkeitskurve der Animation.

Geschwindigkeitskurven definieren die Zeit, die für die Änderung von einem CSS-Stil in einen anderen benötigt wird.

Geschwindigkeitskurven werden verwendet, um Veränderungen weicher zu gestalten.

Weitere Informationen:

CSS3 Tutorial:CSS Animation

HTML DOM Referenzhandbuch:animationTimingFunction-Eigenschaft

Beispiel

Beispiel 1

Die Animation wird von Anfang bis Ende mit gleicher Geschwindigkeit abgespielt:

div
{
animation-timing-function:2s;
}

Selbst ausprobieren

Beispiel 2

Um die verschiedenen Werte der Zeitfunktion besser zu verstehen, werden hier fünf verschiedene div-Elemente mit fünf verschiedenen Werten bereitgestellt:

#div1 {animation-timing-function: linear;}
#div2 {animation-timing-function: ease;}
#div3 {animation-timing-function: ease-in;}
#div4 {animation-timing-function: ease-out;}
#div5 {animation-timing-function: ease-in-out;}

Selbst ausprobieren

Beispiel 3

Wie im obigen Beispiel, aber die Geschwindigkeitskurve wird durch die cubic-bezier-Funktion definiert:

#div1 {animation-timing-function: cubic-bezier(0,0,1,1);}
#div2 {animation-timing-function: cubic-bezier(0.25,0.1,0.25,1);}
#div3 {animation-timing-function: cubic-bezier(0.42,0,1,1);}
#div4 {animation-timing-function: cubic-bezier(0,0,0.58,1);}
#div5 {animation-timing-function: cubic-bezier(0.42,0,0.58,1);}

Selbst ausprobieren

CSS-Syntax

animation-timing-function: value;

Die animation-timing-function verwendet die mathematische Funktion der Cubic Bezier, um Geschwindigkeitskurven zu erzeugen. Sie können sowohl eigene Werte als auch vorgegebene Werte in dieser Funktion verwenden:

Wert Beschreibung Test
linear Die Geschwindigkeit der Animation ist von Anfang bis Ende gleichbleibend. Test
ease Standard. Die Animation beginnt mit einer geringen Geschwindigkeit, beschleunigt sich dann und verlangsamt sich vor dem Ende. Test
ease-in Die Animation beginnt mit einer geringen Geschwindigkeit. Test
ease-out Die Animation endet mit einer geringen Geschwindigkeit. Test
ease-in-out Die Animation beginnt und endet mit einer geringen Geschwindigkeit. Test
cubic-bezier(n,n,n,n) Eigene Werte in der cubic-bezier-Funktion. Mögliche Werte sind numerische Werte zwischen 0 und 1.

Hinweis:Probieren Sie verschiedene Werte im folgenden "Selbst ausprobieren"-Feature aus.

Technische Details

Standardwert: ease
Vererbbarkeit: nein
Version: CSS3
JavaScript-Syntax: objekt.style.animationTimingFunction="linear"

Browser-Unterstützung

Die Zahlen in der Tabelle kennzeichnen die erste Browser-Version, die die Eigenschaft vollständig unterstützt.

Zahlen, die -webkit-, -moz- oder -o- vorangestellt sind, stellen die erste Version dar, die den Präfix verwendet.

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
43.0
4.0 -webkit-		 10.0 16.0
5.0 -moz-		 9.0
4.0 -webkit-		 30.0
15.0 -webkit-
12.0 -o-