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 plutôt qu'instantanément.

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

property : La propriété CSS que tu souhaites faire évoluer avec une transition (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 manière dont la transition progresse (par exemple, linear, ease, ease-in).
delay: Le temps à attendre avant de démarrer la transition (facultatif).

Par exemple :

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

Lorsque tu survoles le bouton, la couleur de son arrière-plan passera du vert au bleu en 0,3 seconde.

Pour appliquer une transition à plusieurs propriétés, indique-les dans une seule déclaration transition, en les séparant par des virgules (une deuxième ligne transition remplacerait la première) :

transition: width 0.3s ease, opacity 0.3s ease;

Défi

Facile

Ajoute une propriété transition à .card pour que les changements de couleur d’arrière-plan et de box-shadow se produisent en douceur sur 0.4 secondes avec une fonction de minutage ease.

Ajoute ensuite une règle .card:hover qui modifie la couleur d’arrière-plan et le box-shadow de la carte, afin que la transition ait quelque chose à animer.

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>