Transitions et effets de survol

Fait partie de la section Maîtrise du CSS du Journey HTML de Coddy. Leçon 24 sur 43.

Une transition vous permet de modifier une propriété progressivement au fil du temps au lieu de l’instantanément.

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

propriété : La propriété CSS que vous souhaitez faire transiter (par exemple, background-color, width, opacity).
durée : Le temps nécessaire pour que la transition se termine (par exemple, 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 (facultatif).

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 afin que les changements de couleur d’arrière-plan et d’ombre portée s’effectuent progressivement sur 0.4 seconde 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>