La pseudo classe :hover permet de modifier un élément au survol. On souhaite parfois que la transition entre les deux états se fasse de manière progressive. Pour cela, on utilise la propriété transition.

Il faut indiquer la propriété concernée, ainsi que la durée (en secondes):

.button { 
  transition-property: color; 
  transition-duration: 0.5s;
} 

.button:hover {
  color: blue;
}

<aside> ⚠️ On ne définit pas la transition dans l'élément :hover, sinon la transition se produira lorsqu'on entre dans l'élément, mais pas lorsqu'on en sort.

</aside>

On peut également définir un délai avant le début de la transition:

.button {
  transition-property: color;
  transition-duration: 0.5s;
  transition-delay: 0.2s;
}

.button:hover {
  color: blue;
}

Ainsi qu'une courbe d'accélération:

.button {
  transition-property: color;
  transition-duration: 0.5s;
  transition-delay: 0.2s;
  transition-timing-function: ease-in-out;
}

.button:hover {
  color: blue;
}

.button {
  transition: color 0.5s, width 0.2s;
}

.button:hover {
  color: blue;
  width: 400px;
}

Afin de gagner de la place, on peut également indiquer les différentes valeurs sur une seule ligne:

.button {
  transition: color 0.5s 0.2s ease-in-out;
} 

.button:hover {
  color: blue;
}

On peut également définir des transitions différentes selon les propriétés, en les séparant par une virgule:

.button {
  transition: color 0.5s, background 0.2s 0.5s;
} 

.button:hover {
  color: blue;
  background: orange;
}