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.

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.

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>