Propriété CSS animation-timing-function
Exemple
Jouez une animation avec la même vitesse du début à la fin :
div {
animation-timing-function: linear;
}
Plus d'exemples "Essayez-le vous-même" ci-dessous.
Définition et utilisation
Le animation-timing-functionspécifie la courbe de vitesse d'une animation.
La courbe de vitesse définit le TEMPS qu'une animation utilise pour passer d'un ensemble de styles CSS à un autre.
La courbe de vitesse est utilisée pour effectuer les changements en douceur.
| Valeur par défaut: | faciliter |
|---|---|
| Hérité: | non |
| Animable : | non. En savoir plus sur l'animation |
| Version: | CSS3 |
| Syntaxe JavaScript : | objet .style.animationTimingFunction="linéaire" |
Prise en charge du navigateur
Les nombres dans le tableau indiquent la première version du navigateur qui prend entièrement en charge la propriété.
Les nombres suivis de -webkit-, -moz- ou -o- spécifient la première version qui a fonctionné avec un préfixe.
| Property | |||||
|---|---|---|---|---|---|
| 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;
La fonction de synchronisation d'animation utilise une fonction mathématique, appelée courbe de Bézier cubique, pour créer la courbe de vitesse. Vous pouvez utiliser vos propres valeurs dans cette fonction ou utiliser l'une des valeurs prédéfinies :
Valeurs de propriété
| Value | Description | Play it |
|---|---|---|
| linear | The animation has the same speed from start to end | |
| ease | Default value. The animation has a slow start, then fast, before it ends slowly | |
| ease-in | The animation has a slow start | |
| ease-out | The animation has a slow end | |
| ease-in-out | The animation has both a slow start and a slow end | |
| step-start | Equivalent to steps(1, start) | |
| step-end | Equivalent to steps(1, end) | |
| steps(int,start|end) | Specifies a stepping function, with two parameters. The first parameter specifies the number of intervals in the function. It must be a positive integer (greater than 0). The second parameter, which is optional, is either the value "start" or "end", and specifies the point at which the change of values occur within the interval. If the second parameter is omitted, it is given the value "end" | |
| cubic-bezier(n,n,n,n) | Define your own values in the cubic-bezier function Possible values are numeric values from 0 to 1 |
|
| initial | Sets this property to its default value. Read about initial | |
| inherit | Inherits this property from its parent element. Read about inherit |
Conseil : essayez les différentes valeurs de la section "Plus d'exemples" ci-dessous.
Plus d'exemples
Exemple
Pour mieux comprendre les différentes valeurs de la fonction de temporisation ;
Voici cinq éléments <div> différents avec cinq valeurs 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;}
Exemple
Identique à l'exemple ci-dessus, mais les courbes de vitesse sont définies avec la fonction cubique-bézier :
#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);}
Pages connexes
Tutoriel CSS : Animations CSS
Référence HTML DOM : propriété animationTimingFunction