Beispiel
Spielen Sie eine Animation mit der gleichen Geschwindigkeit von Anfang bis Ende:
div {
-webkit-animation-timing-function: linear; /* Chrome, Safari,
Opera */
animation-timing-function: linear;
} Versuch es selber " Mehr "Try it Yourself" Sie "Try it Yourself" Beispiele unten.
Definition und Verwendung
Die Animation-Timing-Funktion gibt die Geschwindigkeitskurve einer Animation.
Die Geschwindigkeitskurve definiert die Zeit, eine Animation aus einem Satz von CSS-Stile zu einem anderen zu wechseln verwendet.
Die Geschwindigkeitskurve wird verwendet, um die Änderungen glatt zu machen.
| Standardwert: | ease |
|---|---|
| Vererbt: | no |
| Anima: | no. Read about animatable |
| Version: | CSS3 |
| JavaScript-Syntax: | object .style.animationTimingFunction="linear" Try it |
Browser-Unterstützung
Die Zahlen in der Tabelle geben Sie die erste Browser-Version, die die Eigenschaft vollständig unterstützt.
Zahlen, gefolgt von -webkit-, -moz- oder -o- die erste Version an, die mit einem Präfix gearbeitet.
| Eigentum | |||||
|---|---|---|---|---|---|
| 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 Animation-Timing-Funktion verwendet eine mathematische Funktion, die kubischen Bezier-Kurve, genannt, um die Geschwindigkeitskurve zu machen. Sie können Ihre eigenen Werte in dieser Funktion, oder verwenden Sie eine der vordefinierten Werte verwendet werden:
Eigenschaftswerte
| Wert | Beschreibung | Spiel es |
|---|---|---|
| linear | Die Animation hat die gleiche Geschwindigkeit von Anfang bis Ende | Spiel es " |
| ease | Standardwert. Die Animation hat einen langsamen Start, dann schnell, bevor es langsam endet | Spiel es " |
| ease-in | Die Animation hat einen langsamen Start | Spiel es " |
| ease-out | Die Animation hat eine langsame Ende | Spiel es " |
| ease-in-out | Die Animation hat sowohl einen langsamen Start und ein langsames Ende | Spiel es " |
| step-start | Entspricht die steps(1, start) | |
| step-end | Entspricht die steps(1, end) | |
| steps(int,start|end) | Gibt eine Schrittfunktion mit zwei Parametern. Der erste Parameter gibt die Anzahl der Intervalle in der Funktion. Es muss eine positive ganze Zahl (greater than 0) . Der zweite Parameter, der optional ist, ist entweder der Wert "start" oder "end" , und gibt den Punkt , an dem die Änderung der Werte innerhalb des Intervalls auftreten. Wenn der zweite Parameter weggelassen wird, wird es den Wert gegeben "end" | |
| cubic-bezier( n , n , n , n ) | Definieren Sie Ihre eigenen Werte in der kubisch-Bezier-Funktion Mögliche Werte sind Zahlenwerte von 0 bis 1 | |
| initial | Setzt diese Eigenschaft auf den Standardwert. Lesen Sie mehr über Anfangs | |
| inherit | Erbt diese Eigenschaft von seinem übergeordneten Element. Lesen Sie mehr über erben |
Tip: Probieren Sie die verschiedenen Werte in der es selbst ausprobieren Abschnitt weiter unten.
Mehr Beispiele
Beispiel
Um besser zu verstehen, die verschiedenen Zeitfunktionswerte;
Hier sind fünf verschiedene <div> Elemente mit fünf unterschiedlichen Werten:
/* For Chrome, Safari and Opera */
#div1 {-webkit-animation-timing-function: linear;}
#div2 {-webkit-animation-timing-function: ease;}
#div3 {-webkit-animation-timing-function: ease-in;}
#div4 {-webkit-animation-timing-function: ease-out;}
#div5 {-webkit-animation-timing-function: ease-in-out;}
/* Standard
syntax */
#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;}
Versuch es selber " Beispiel
Gleiche wie das obige Beispiel, aber die Geschwindigkeitskurven mit der kubischen Bezier-Funktion definiert:
/* For Chrome, Safari and Opera */
#div1 {-webkit-animation-timing-function: cubic-bezier(0,0,1,1);}
#div2 {-webkit-animation-timing-function: cubic-bezier(0.25,0.1,0.25,1);}
#div3 {-webkit-animation-timing-function: cubic-bezier(0.42,0,1,1);}
#div4 {-webkit-animation-timing-function: cubic-bezier(0,0,0.58,1);}
#div5 {-webkit-animation-timing-function: cubic-bezier(0.42,0,0.58,1);}
/* Standard syntax */
#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);} Versuch es selber " Verwandte Seiten
CSS3 Tutorial: CSS3 Animationen
HTML - DOM - Referenz: animationTimingFunction property