CSS Transitions

Transitions CSS

Les transitions CSS permettent de changer les valeurs des propriétés en douceur, sur une durée donnée.

Survolez l'élément ci-dessous pour voir un effet de transition CSS :

CSS

La propriété de transition CSS

Pour créer un effet de transition, vous devez spécifier la propriété CSS à laquelle vous souhaitez ajouter une transition, ainsi que la durée de celle-ci.

La propriété CSS transition est une propriété abrégée pour :

Exemple de transition CSS

L'exemple suivant montre un élément <div> de 100px * 100px. Cet élément <div> a un effet de transition spécifié pour la propriété de largeur, avec une durée de 2 secondes :

Exemple

 div { 
 width: 100px; 
 height: 100px; 
 background-color: red; 
 transition: width 2s; 
 } 

Comment déclencher la transition

La transition est déclenchée lorsqu'il y a un changement dans les propriétés de l'élément. Cela se produit souvent dans les pseudo-classes (:hover, :active, :focus, ou :checked).

Ainsi, à partir du code ci-dessus, l'effet de transition commencera lorsque la propriété de largeur changera de valeur.

Maintenant, nous ajoutons une classe div:hover qui spécifie une nouvelle valeur pour la propriété de largeur lorsque l'utilisateur survole l'élément <div> :

Exemple

 div:hover { 
 width: 300px; 
 } 

Essayez-le vous-même »

Remarquez que lorsque le curseur sort de l'élément, il reviendra progressivement à son style d'origine.

Changer plusieurs valeurs de propriété

Vous pouvez changer plusieurs propriétés en les séparant par des virgules.

L'exemple suivant ajoute un effet de transition pour les propriétés de largeur, hauteur et couleur de fond, avec une durée de 2 secondes pour la largeur, 4 secondes pour la hauteur, et 3 secondes pour la couleur de fond :

Exemple

Ajoutez un effet de transition pour les propriétés de largeur, hauteur et couleur de fond :

 div { 
 transition: width 2s, height 4s, background-color 3s; 
 } 

Essayez-le vous-même »

Courbe de vitesse de transition CSS

La propriété transition-timing-function spécifie la courbe de vitesse de l'effet de transition.

Cette propriété peut avoir l'une des valeurs suivantes :

ease - la transition commencera lentement, puis ira vite, et finira lentement (c'est la valeur par défaut)
linear - la transition gardera la même vitesse du début à la fin
ease-in - la transition commencera lentement
ease-out - la transition finira lentement
ease-in-out - la transition aura un début et une fin lents
cubic-bezier(n,n,n,n) - vous permet de définir vos propres valeurs dans une fonction cubic-bezier

L'exemple suivant montre quelques-unes des différentes courbes de vitesse qui peuvent être utilisées :

Exemple

Quelques courbes de vitesse différentes pour la transition :

 #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;} 

Essayez-le vous-même »

Délai de transition CSS

La propriété transition-delay spécifie un délai avant que la transition ne commence.

La valeur transition-delay est définie en secondes (s) ou en millisecondes (ms).

L'exemple suivant a un délai de 1 seconde avant de commencer :

Exemple

Ajoutez un délai de 1 seconde avant de commencer :

 div { 
 transition-delay: 1s; 
 } 

Essayez-le vous-même »

Transition + Transformation

L'exemple suivant combine transition et transformation pour un <div> :

Exemple

 div { 
 transition: width 2s, height 2s, background-color 2s, transform 2s; 
 } 

Essayez-le vous-même »

L'exemple suivant combine transition et transformation pour un bouton :

Exemple

 button { 
 transition: background-color 1s ease-out, transform 1s ease-out; 
 } 

Essayez-le vous-même »

Plus d'exemples de transition

Les propriétés de transition CSS peuvent être spécifiées une par une, comme ceci :

Exemple

 div { 
 transition-property: width; 
 transition-duration: 2s; 
 transition-timing-function: linear; 
 transition-delay: 1s; 
 } 

Essayez-le vous-même »

ou en utilisant la propriété abrégée transition :

Exemple

 div { 
 transition: width 2s linear 1s; 
 } 

Essayez-le vous-même »

Propriétés de transition CSS

Le tableau suivant répertorie toutes les propriétés de transition CSS :

Propriété	Description
transition	Une propriété abrégée pour définir les quatre propriétés de transition en une seule propriété
transition-delay	Spécifie un délai (en secondes) pour l'effet de transition
transition-duration	Spécifie combien de secondes ou de millisecondes un effet de transition prend pour se terminer
transition-property	Spécifie le nom de la propriété CSS pour laquelle l'effet de transition est destiné
transition-timing-function	Spécifie la courbe de vitesse de l'effet de transition