CSS - Eigenschaft animation-timing-function
Beispiel
Spielen Sie eine Animation von Anfang bis Ende mit derselben Geschwindigkeit ab:
div {
animation-timing-function: linear;
}
Weitere „Probieren Sie es selbst“-Beispiele weiter unten.
Definition und Verwendung
Der animation-timing-function
gibt den Geschwindigkeitsverlauf einer Animation an.
Die Geschwindigkeitskurve definiert die ZEIT, die eine Animation benötigt, um von einem Satz CSS-Stile zu einem anderen zu wechseln.
Die Geschwindigkeitskurve wird verwendet, um die Änderungen reibungslos vorzunehmen.
Standardwert: | Leichtigkeit |
---|---|
Vererbt: | Nein |
Animierbar: | Nein. Lesen Sie mehr über animierbare |
Ausführung: | CSS3 |
JavaScript-Syntax: | Objekt .style.animationTimingFunction="linear" |
Browser-Unterstützung
Die Zahlen in der Tabelle geben die erste Browserversion an, die die Eigenschaft vollständig unterstützt.
Zahlen gefolgt von -webkit-, -moz- oder -o- geben die erste Version an, die mit einem Präfix funktioniert hat.
Property | |||||
---|---|---|---|---|---|
animation-timing-function | 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- |
CSS-Syntax
animation-timing-function: linear|ease|ease-in|ease-out|ease-in-out|step-start|step-end|steps(int,start|end)|cubic-bezier(n,n,n,n)|initial|inherit;
Die Animations-Timing-Funktion verwendet eine mathematische Funktion, die als kubische Bezier-Kurve bezeichnet wird, um die Geschwindigkeitskurve zu erstellen. Sie können in dieser Funktion Ihre eigenen Werte verwenden oder einen der vordefinierten Werte verwenden:
Eigenschaftswerte
Value | Description | Play it |
---|---|---|
linear | The animation has the same speed from start to end | |
ease | Default value. The animation has a slow start, then fast, before it ends slowly | |
ease-in | The animation has a slow start | |
ease-out | The animation has a slow end | |
ease-in-out | The animation has both a slow start and a slow end | |
step-start | Equivalent to steps(1, start) | |
step-end | Equivalent to steps(1, end) | |
steps(int,start|end) | Specifies a stepping function, with two parameters. The first parameter specifies the number of intervals in the function. It must be a positive integer (greater than 0). The second parameter, which is optional, is either the value "start" or "end", and specifies the point at which the change of values occur within the interval. If the second parameter is omitted, it is given the value "end" | |
cubic-bezier(n,n,n,n) | Define your own values in the cubic-bezier function Possible values are numeric values from 0 to 1 |
|
initial | Sets this property to its default value. Read about initial | |
inherit | Inherits this property from its parent element. Read about inherit |
Tipp: Probieren Sie die verschiedenen Werte im Abschnitt "Weitere Beispiele" weiter unten aus.
Mehr Beispiele
Beispiel
Um die verschiedenen Zeitfunktionswerte besser zu verstehen;
Hier sind fünf verschiedene <div>-Elemente mit fünf verschiedenen Werten:
#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;}
Beispiel
Wie im obigen Beispiel, aber die Geschwindigkeitskurven werden mit der kubischen 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);}
Verwandte Seiten
CSS-Tutorial: CSS-Animationen
HTML-DOM-Referenz: Eigenschaft animationTimingFunction