Propriété animation-timing-function

La propriété animation-timing-function définit la vitesse de variation (accélération) de l'animation. Par exemple, d'abord lentement, puis rapidement, puis lentement, etc.

Syntaxe

Valeurs

Valeur	Description
ease	D'abord lentement, puis rapidement, à la fin à nouveau lentement.
ease-in	Commence lentement et accélère progressivement.
ease-out	Commence rapidement et s'arrête progressivement.
ease-in-out	D'abord lentement, puis rapidement, à la fin à nouveau lentement. Diffère de ease par la vitesse.
linear	Toujours la même vitesse.
step-start	Pas d'animation, la propriété prend immédiatement la valeur finale.
step-end	Pas d'animation, la propriété attend le temps défini dans animation-duraton, puis prend instantanément la valeur finale.
steps	La valeur de la propriété change par à-coups.
cubic-bezier	Courbe de Bézier qui peut définir une animation arbitraire. Voir générateur de courbes de Bézier.

Valeur par défaut : ease.

Comparaison des différentes valeurs

Passez la souris sur les blocs présentés ci-dessous pour voir le fonctionnement de tous les types de fonctions de timing :

Voir aussi