Propriété transition-timing-function

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

Syntaxe

sélecteur {
	transition-timing-function: valeur;
}

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 `transition-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 :

Exemple

Passez la souris sur le bloc - il changera progressivement sa largeur en 2 secondes. Comme la valeur ease-in est définie, l'animation commencera lentement et accélérera progressivement :

<div id="elem"></div>

#elem {
	border: 1px solid black;
	transition-timing-function: ease-in;
	transition-duration: 2s;
	transition-property: width;
	height: 50px;
	width: 100px;
}
#elem:hover {
	width: 400px;
}

Voir aussi

la propriété transition-duration,
qui définit la durée de la transition fluide
la propriété transition-property,
qui définit le nom de la propriété pour la transition fluide
la propriété transition-delay,
qui définit le délai avant la transition fluide
la propriété transition,
qui est un raccourci pour la transition fluide
la propriété animation,
qui permet de créer une animation