CSS3 Animations-Timing-Funktion Eigenschaft
Beispiele
Von Anfang an mit der gleichen Geschwindigkeit zu beenden Sie die Animation spielen:
-webkit-animation-timing-function:linear; /* Safari and Chrome */
Versuchen »
Im unteren Bereich dieser Seite finden Sie weitere Beispiele.
Browser-Unterstützung
属性 | |||||
---|---|---|---|---|---|
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- |
Tag Definitionen und Anleitungen
Wie Animation-Timing-Funktion die Animation Gibt einen Zyklus abzuschließen.
Geschwindigkeitskurve Definition-Filme von einem CSS-Stylesheet in eine andere festgelegte Menge an Zeit.
Geschwindigkeitskurve wird verwendet, glatter zu ändern.
Standard: | Leichtigkeit |
---|---|
Vererbung: | keine |
Version: | CSS3 |
JavaScript-Syntax: | Objekt object.style.animationTimingFunction = "linear" |
Grammatik
Mathematische Funktionen Animation-Timing-Funktion verwenden, die so genannte kubischen Bezier-Kurve, die Geschwindigkeitskurve. Mit dieser Funktion können Sie Ihre eigenen Werte zu verwenden, oder eine der vordefinierten Werte verwendet werden:
Wert | Beschreibung | Test |
---|---|---|
linear | Animation von Anfang an mit der gleichen Geschwindigkeit zu beenden. | Test |
Leichtigkeit | Default. Anime begann mit niedriger Geschwindigkeit, dann beschleunigen, verlangsamen am Ende nach unten. | Test |
Einfachheit in | Animation beginnt bei niedriger Geschwindigkeit. | Test |
Leichtigkeit-out | Animation an Low-End. | Test |
Leichtigkeit-in-out | Animation, Anfang und Ende mit niedriger Geschwindigkeit. | Test |
kubische Bezier (n, n,n, n) | In der kubisch-Bezier-Funktion in der eigenen Werte. Die möglichen Werte sind Werte von 0-1. |
Tipp: Probieren Sie das folgende "versuchen" Funktion einen anderen Wert verwenden.
![Beispiele](/images/tryitimg.gif)
Online Beispiele
Beispiele
Zum besseren Verständnis der unterschiedlichen Zeitfunktionswerte zu verstehen, gibt es eine Reihe von fünf verschiedenen Werten von fünf verschiedenen div Elemente vorgesehen:
#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;}
/* Firefox: */
#div1 {-moz-animation-timing-function: linear;}
#div2 {-moz-animation-timing-function: ease;}
#div3 {-moz-animation-timing-function: ease-in;}
#div4 {-moz-animation-timing-function: ease-out;}
#div5 {-moz-animation-timing-function: ease-in-out;}
/* Safari and Chrome: */
#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;}
Versuchen »
Beispiele
Das gleiche wie im vorherigen Beispiel, sondern wird durch die Geschwindigkeitskurve kubische 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);}
/* Firefox: */
#div1 {-moz-animation-timing-function: cubic-bezier(0,0,1,1;}
#div2 {-moz-animation-timing-function: cubic-bezier(0.25,0.1,0.25,1);}
#div3 {-moz-animation-timing-function: cubic-bezier(0.42,0,1,1);}
#div4 {-moz-animation-timing-function: cubic-bezier(0,0,0.58,1);}
#div5 {-moz-animation-timing-function: cubic-bezier(0.42,0,0.58,1);}
/* Safari and Chrome: */
#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);}
Versuchen »
In Verbindung stehende Artikel
CSS3 Tutorial: CSS3 Animationen