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.
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