Transitions CSS


Table des matières

    Afficher la table des matières


Transitions CSS

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

Passez la souris sur l'élément ci-dessous pour voir un effet de transition CSS :

CSS

Dans ce chapitre, vous découvrirez les propriétés suivantes :

  • transition
  • transition-delay
  • transition-duration
  • transition-property
  • transition-timing-function

Prise en charge des transitions par le navigateur

Les nombres dans le tableau spécifient la première version du navigateur qui prend entièrement en charge la propriété.

Property
transition 26.0 10.0 16.0 6.1 12.1
transition-delay 26.0 10.0 16.0 6.1 12.1
transition-duration 26.0 10.0 16.0 6.1 12.1
transition-property 26.0 10.0 16.0 6.1 12.1
transition-timing-function 26.0 10.0 16.0 6.1 12.1

Comment utiliser les transitions CSS ?

Pour créer un effet de transition, vous devez spécifier deux choses :

  • la propriété CSS à laquelle vous souhaitez ajouter un effet

  • la durée de l'effet

Remarque : Si la partie durée n'est pas spécifiée, la transition n'aura aucun effet, car la valeur par défaut est 0.

L'exemple suivant montre un élément <div> rouge de 100 px * 100 px. Le <div> element a également spécifié un effet de transition pour la propriété width, d'une durée de 2 secondes :

Exemple

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

L'effet de transition commencera lorsque la propriété CSS spécifiée (largeur) changera de valeur.

Maintenant, spécifions une nouvelle valeur pour la propriété width lorsqu'un utilisateur passe la souris sur l'élément <div> :

Exemple

div:hover
{
  width: 300px;
}

Essayez-le vous-même →

<!DOCTYPE html>
<html>
<head>
<style> 
div {
  width: 100px;
  height: 100px;
  background: red;
  transition: width 2s;
}

div:hover {
  width: 300px;
}
</style>
</head>
<body>

<h1>The transition Property</h1>

<p>Hover over the div element below, to see the transition effect:</p>
<div></div>

</body>
</html>


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


Modifier plusieurs valeurs de propriété

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

Exemple

div
{
  transition: width 2s, height 4s;
}

Essayez-le vous-même →

<!DOCTYPE html>
<html>
<head>
<style> 
div {
  width: 100px;
  height: 100px;
  background: red;
  transition: width 2s, height 4s;
}

div:hover {
  width: 300px;
  height: 300px;
}
</style>
</head>
<body>

<h1>The transition Property</h1>

<p>Hover over the div element below, to see the transition effect:</p>

<div></div>

</body>
</html>




Spécifier la courbe de vitesse de la transition

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

La propriété transition-timing-function peut avoir les valeurs suivantes :

ease

- spécifie un effet de transition avec un démarrage lent, puis rapide, puis une fin lente (c'est la valeur par défaut)

linear

- spécifie un effet de transition avec la même vitesse du début à la fin

ease-in

- spécifie un effet de transition avec un démarrage lent

ease-out

- spécifie un effet de transition avec une fin lente

ease-in-out

- spécifie un effet de transition avec un début et une fin lents

cubic-bezier(n,n,n,n)

- vous permet de définir vos propres valeurs dans une fonction cubique-bézier

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

Exemple

#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 →

<!DOCTYPE html>
<html>
<head>
<style> 
div {
  width: 100px;
  height: 100px;
  background: red;
  transition: width 2s;
}

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

div:hover {
  width: 300px;
}
</style>
</head>
<body>

<h1>The transition-timing-function Property</h1>

<p>Hover over the div elements below, to see the different speed curves:</p>

<div id="div1">linear</div><br>
<div id="div2">ease</div><br>
<div id="div3">ease-in</div><br>
<div id="div4">ease-out</div><br>
<div id="div5">ease-in-out</div><br>

</body>
</html>



Retarder l'effet de transition

La propriété transition-delay spécifie un délai (en secondes) pour l'effet de transition.

L'exemple suivant présente un délai d'une seconde avant le démarrage :

Exemple

div {
  
transition-delay: 1s;
}

Essayez-le vous-même →

<!DOCTYPE html>
<html>
<head>
<style> 
div {
  width: 100px;
  height: 100px;
  background: red;
  transition: width 3s;
  transition-delay: 1s;
}

div:hover {
  width: 300px;
}
</style>
</head>
<body>

<h1>The transition-delay Property</h1>

<p>Hover over the div element below, to see the transition effect:</p>

<div></div>

<p><b>Note:</b> The transition effect has a 1 second delay before starting.</p>

</body>
</html>



Transition + Transformation

L'exemple suivant ajoute un effet de transition à la transformation :

Exemple

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

Essayez-le vous-même →

<!DOCTYPE html>
<html>
<head>
<style> 
div {
  width: 100px;
  height: 100px;
  background: red;
  transition: width 2s, height 2s, transform 2s;
}

div:hover {
  width: 300px;
  height: 300px;
  transform: rotate(180deg);
}
</style>
</head>
<body>

<h1>Transition + Transform</h1>

<p>Hover over the div element below:</p>

<div></div>

</body>
</html>



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 →

<!DOCTYPE html>
<html>
<head>
<style> 
div {
  width: 100px;
  height: 100px;
  background: red;
  transition-property: width;
  transition-duration: 2s;
  transition-timing-function: linear;
  transition-delay: 1s;
}

div:hover {
  width: 300px;
}
</style>
</head>
<body>

<h1>The transition Properties Specified One by One</h1>

<p>Hover over the div element below, to see the transition effect:</p>

<div></div>

<p><b>Note:</b> The transition effect has a 1 second delay before starting.</p>

</body>
</html>


ou en utilisant la propriété raccourcie transition :

Exemple

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

Essayez-le vous-même →

<!DOCTYPE html>
<html>
<head>
<style> 
div {
  width: 100px;
  height: 100px;
  background: red;
  transition: width 2s linear 1s;
}

div:hover {
  width: 300px;
}
</style>
</head>
<body>

<h1>Using The transition Shorthand Property</h1>

<p>Hover over the div element below, to see the transition effect:</p>

<div></div>

<p><b>Note:</b> The transition effect has a 1 second delay before starting.</p>

</body>
</html>




Propriétés des transitions CSS

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

transition

Une propriété raccourcie 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 le nombre de secondes ou de millisecondes nécessaires à l'exécution d'un effet de transition.

transition-property

Spécifie le nom de la propriété CSS à laquelle l'effet de transition est destiné

transition-timing-function

Spécifie la courbe de vitesse de l'effet de transition