Exemple
Jouer une animation avec la même vitesse du début à la fin:
div {
-webkit-animation-timing-function: linear; /* Chrome, Safari,
Opera */
animation-timing-function: linear;
} Essayez - le vous - même » Plus "Try it Yourself" exemples ci - dessous.
Définition et utilisation
Le timing-fonction d'animation spécifie la courbe de vitesse d'une animation.
La courbe de vitesse définit le temps d'une animation utilise pour passer d'un ensemble de styles CSS à l'autre.
La courbe de vitesse est utilisée pour effectuer les changements en douceur.
| Valeur par défaut: | ease |
|---|---|
| Hérité: | no |
| Animable: | no. Read about animatable |
| Version: | CSS3 |
| Syntaxe JavaScript: | object .style.animationTimingFunction="linear" Try it |
support du navigateur
Les chiffres du tableau indiquent la première version du navigateur qui prend en charge entièrement la propriété.
Numbers suivis par -webkit-, -moz-, ou -O- précisent la première version qui a travaillé avec un préfixe.
| Propriété | |||||
|---|---|---|---|---|---|
| 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- |
Syntaxe CSS
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; Le timing-fonction d'animation utilise une fonction mathématique, appelée courbe de Bézier cubique, pour rendre la courbe de vitesse. Vous pouvez utiliser vos propres valeurs dans cette fonction, ou utiliser l'une des valeurs prédéfinies:
propriété valeurs
| Valeur | La description | Joue-le |
|---|---|---|
| linear | L'animation a la même vitesse du début à la fin | Joue-le " |
| ease | Valeur par défaut. L'animation a un démarrage lent, puis rapide, avant qu'il ne se termine lentement | Joue-le " |
| ease-in | L'animation a un démarrage lent | Joue-le " |
| ease-out | L'animation a une fin lente | Joue-le " |
| ease-in-out | L'animation est à la fois un démarrage lent et une extrémité lente | Joue-le " |
| step-start | Equivalent à steps(1, start) | |
| step-end | Equivalent à steps(1, end) | |
| steps(int,start|end) | Indique une fonction pas à pas, avec deux paramètres. Le premier paramètre indique le nombre d'intervalles dans la fonction. Il doit être un entier positif (greater than 0) . Le second paramètre, qui est facultative, est soit la valeur "start" ou "end" , et indique le point où le changement de valeurs se produire dans l'intervalle. Si le second paramètre est omis, il reçoit la valeur "end" | |
| cubic-bezier( n , n , n , n ) | Définissez vos propres valeurs dans la fonction cubique-Bézier Les valeurs possibles sont les valeurs numériques de 0 à 1 | |
| initial | Définit cette propriété à sa valeur par défaut. Lisez à propos initial | |
| inherit | Hérite cette propriété de son élément parent. Lisez à propos de hériteront |
Tip: Essayez les différentes valeurs de la section Essayez vous - même ci - dessous.
Autres exemples
Exemple
Pour mieux comprendre les différentes valeurs de la fonction de synchronisation;
Voici cinq différents <div> éléments avec cinq valeurs différentes:
/* 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;}
Essayez - le vous - même » Exemple
Identique à l'exemple ci-dessus, mais les courbes de vitesse sont définies avec la fonction cubique-Bézier:
/* 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);} Essayez - le vous - même » Pages associées
CSS3 tutoriel: CSS3 Animations
Référence HTML DOM: animationTimingFunction property