Attribut transition-timing-function CSS

Définition et utilisation

L'attribut transition-timing-function définit la courbe de vitesse de l'effet de transition.

Cette propriété permet à l'effet de transition de changer sa vitesse au fil du temps.

Veuillez également consulter :

Tutoriel CSS :Transition CSS

Manuel HTML DOM :Attribut transitionTimingFunction

Exemple

Exemple 1

Effet de transition avec la même vitesse de début à la fin :

div
{
transition-timing-function: linear;
}

Essayer vous-même

Syntaxe CSS

transition-timing-function: linear|ease|ease-in|ease-out|ease-in-out|cubic-
bezier(n,n,n,n);

Valeur de l'attribut

Valeur Description
linear Définir un effet de transition qui commence et se termine à la même vitesse (égal à cubic-bezier(0,0,1,1)).
ease Définir un effet de transition qui commence lentement, puis s'accélère, puis se termine lentement (cubic-bezier(0.25,0.1,0.25,1)).
ease-in Définir un effet de transition qui commence lentement (égal à cubic-bezier(0.42,0,1,1)).
ease-out Définir un effet de transition qui se termine lentement (égal à cubic-bezier(0,0,0.58,1)).
ease-in-out Définir un effet de transition qui commence et se termine lentement (égal à cubic-bezier(0.42,0,0.58,1)).
cubic-bezier(n,n,n,n) Définir vos propres valeurs dans la fonction cubic-bezier. Les valeurs possibles sont des nombres entre 0 et 1.

Astuce :Testez différentes valeurs dans les exemples pour mieux comprendre leur principe de fonctionnement.

Détails techniques

Valeur par défaut : ease
Héritabilité : non
Version : CSS3
JavaScript syntaxe : object.style.transitionTimingFunction="linear"

Plus d'exemples

Exemple 2

Pour mieux comprendre les différentes valeurs des fonctions, regardez les cinq div éléments différents avec cinq valeurs différentes :

#div1 {transition-timing-function: linear;}
#div2 {transition-timing-function: ease;}
#div3 {transition-timing-function: ease-in;}
#div4 {transition-timing-function: ease-out;}
#div5 {transition-timing-function: ease-in-out;}

Essayer vous-même

Exemple 3

Comme dans l'exemple précédent, mais la courbe de vitesse est définie par cubic-bezier :

#div1 {transition-timing-function: cubic-bezier(0,0,1,1);}
#div2 {transition-timing-function: cubic-bezier(0.25,0.1,0.25,1);}
#div3 {transition-timing-function: cubic-bezier(0.42,0,1,1);}
#div4 {transition-timing-function: cubic-bezier(0,0,0.58,1);}
#div5 {transition-timing-function: cubic-bezier(0.42,0,0.58,1);}

Essayer vous-même

Prise en charge du navigateur

Les nombres dans le tableau indiquent la première version du navigateur qui prend en charge cette propriété en totalité.

Les nombres avec des préfixes -webkit-, -moz- ou -o- indiquent la première version utilisée avec les préfixes.

Chrome IE / Edge Firefox Safari Opera
26.0
4.0 -webkit-		 10.0 16.0
4.0 -moz-		 6.1
3.1 -webkit-		 12.1
10.5 -o-