Hover, transitions & animations

1. Pseudo-classe :hover

:hover permet de changer le style d’un élément quand la souris passe dessus. Très utilisé pour les liens, boutons, cartes, etc.

a {
  color: #4f8bff;
}

a:hover {
  color: #ff5c7a;
}

Exemple de bouton avec hover :

2. Transitions : rendre les changements fluides

Sans transition, les changements CSS sont instantanés. Avec transition, ils deviennent animés.

.carte {
  background-color: #050814;
  transform: scale(1);
  transition: background-color 0.3s ease, transform 0.3s ease;
}

.carte:hover {
  background-color: #4f8bff;
  transform: scale(1.05);
}

• Propriété : ce qui change (background-color, transform…)
• Durée : 0.3s, 0.2s…
• Timing : ease, linear, ease-in-out, etc.

3. Mini labo : boîte avec transition

Passe la souris sur la boîte pour voir la transition. Tu peux changer la durée et voir la différence.

4. transform : déplacer, zoomer, tourner

La propriété transform permet de transformer un élément :

• scale() : agrandir / réduire
• translateX(), translateY() : déplacer
• rotate() : tourner

.carte:hover {
  transform: translateY(-5px) scale(1.05);
}

5. Animations avec @keyframes

Pour créer une vraie animation (qui ne dépend pas du hover), on utilise @keyframes + la propriété animation.

@keyframes clignote {
  0%   { opacity: 1; }
  50%  { opacity: 0.3; }
  100% { opacity: 1; }
}

.alerte {
  animation: clignote 1s infinite;
}

Exemple de bouton animé :

• animation-name : nom de l’animation (clignote)
• animation-duration : durée d’un cycle (1s, 2s…)
• animation-iteration-count : nombre de répétitions (ou infinite)

6. Mini-projet : bouton animé & cartes interactives

Crée une page effets.html + un fichier effets.css avec :

• Un bouton principal avec :
  • un effet :hover (couleur + légère transformation),
  • une transition fluide,
  • optionnel : une animation subtile (ex : pulsation lente).
• 3 cartes alignées (ou en colonne sur mobile) :
  • effet hover : légère ombre et hausse,
  • transition soignée.

.btn-principal {
  display: inline-block;
  padding: 10px 18px;
  border-radius: 999px;
  background-color: #4f8bff;
  color: #fff;
  text-decoration: none;
  transition: background-color 0.25s ease, transform 0.25s ease;
}

.btn-principal:hover {
  background-color: #ff5c7a;
  transform: translateY(-2px) scale(1.03);
}