Transitions et effets de survol

Fait partie de la section CSS Mastery du Journey HTML de Coddy — leçon 24 sur 43.

Une transition vous permet de modifier une propriété de manière fluide au fil du temps plutôt qu'instantanément.

selector {
  transition: property duration timing-function delay;
}

propriété : La propriété CSS que vous souhaitez animer (par ex., background-color, width, opacity).
durée : Le temps nécessaire pour que la transition se termine (par ex., 1s pour 1 seconde).

timing-function : Comment la transition progresse (par exemple, linear, ease, ease-in).
delay : Combien de temps attendre avant de commencer la transition (optionnel).

Par exemple :

.button {
  background-color: green;
  transition: background-color 0.3s ease;
}
.button:hover {
  background-color: blue;
}

Lorsque vous survolez le bouton, sa couleur d'arrière-plan passera du vert au bleu en 0,3 seconde.

Testez-vous

Cette leçon comprend un petit quiz. Commencez la leçon pour y répondre et suivre votre progression.

Testez-vous

Cette leçon comprend un petit quiz. Commencez la leçon pour y répondre et suivre votre progression.

Défi

Facile

Ajoutez une propriété transition à .card pour que les modifications de la background-color et de la box-shadow se produisent en douceur sur 0.4 secondes avec une fonction de temporisation ease.

Aide-mémoire

Une transition vous permet de modifier une propriété de manière fluide au fil du temps plutôt qu'instantanément.

selector {
  transition: property duration timing-function delay;
}

property : La propriété CSS que vous souhaitez faire transiter (par exemple, background-color, width, opacity)
duration : Le temps nécessaire pour que la transition se termine (par exemple, 1s pour 1 seconde)
timing-function : La façon dont la transition progresse (par exemple, linear, ease, ease-in)
delay : Le temps d'attente avant de commencer la transition (optionnel)

.button {
  background-color: green;
  transition: background-color 0.3s ease;
}
.button:hover {
  background-color: blue;
}

Essayez vous-même

<!DOCTYPE html>
<html>
<head>
  <style>
    /* Write your CSS here */
    .card {
      background-color: white;
      padding: 10px;
      box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    }
    
  </style>
</head>
<body>
  <div class="card">
    Hover over me!
  </div>
</body>
</html>

Testez-vous

Cette leçon comprend un petit quiz. Commencez la leçon pour y répondre et suivre votre progression.