CSS3 propriété animation-timing-function
Exemples
De début à la fin à la même vitesse jouer l'animation:
-webkit-animation-timing-function:linear; /* Safari and Chrome */
Essayez »
Dans le bas de cette page pour plus d'exemples.
support du navigateur
| 属性 | |||||
|---|---|---|---|---|---|
| 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- |
définitions de balises et les instructions
Comment l'animation-timing-function Indique l'animation terminer un cycle.
définition de la courbe de vitesse des films à partir d'une feuille de style CSS dans un autre laps de temps.
courbe de vitesse est utilisé pour effectuer des modifications plus lisse.
| Par défaut: | facilité |
|---|---|
| Héritage: | aucun |
| Version: | CSS3 |
| Syntaxe JavaScript: | objet object.style.animationTimingFunction = "linéaire" |
grammaire
Fonctions utilisation animation-timing-function mathématique, appelée courbe de Bézier cubique, la courbe de vitesse. Avec cette fonction, vous pouvez utiliser vos propres valeurs, ou utiliser l'une des valeurs prédéfinies:
| valeur | description | test |
|---|---|---|
| linéaire | Animations du début à la fin à la même vitesse. | test |
| facilité | Par défaut. Anime a commencé à basse vitesse, puis accélérer, de ralentir à la fin. | test |
| facilité dans | Animations commence à basse vitesse. | test |
| facilité à | Animation bas de gamme. | test |
| facilité in-out | début de l'animation et à la fin à faible vitesse. | test |
| Bézier cubique (n, n,n, n) | Dans la fonction cubique-Bézier dans vos propres valeurs. Les valeurs possibles sont de 0-1 valeurs. |
Astuce: Essayez la fonction suivante "essayer" d' utiliser une valeur différente.
exemples en ligne
Exemples
Pour mieux comprendre les différentes valeurs de la fonction de synchronisation, il est prévu un ensemble de cinq valeurs différentes de cinq éléments div différentes:
#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;}
Essayez »
Exemples
La même chose que dans l'exemple précédent, mais est définie par la fonction cubique de Bézier courbe de vitesse:
#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);}
Essayez »
articles connexes
CSS3 tutoriel: CSS3 Animations