Transitions

Une transition anime un changement d'état (hover, focus, active).

.button {
  background: #0ea5e9;
  transition: background 0.25s ease, transform 0.25s ease;
}

.button:hover {
  background: #0284c7;
  transform: translateY(-2px);
}

Limiter les propriétés animées pour garder de bonnes performances.

En general, animer transform et opacity donne de bons résultats avec un impact plus faible sur les performances.

A retenir

Une transition reussie est presque invisible : elle rend l'interface plus fluide sans distraire l'utilisateur. Mieux vaut peu d'effets, bien calibres.

Mini pratique

Ajoute un effet hover sur un bouton avec transform + opacity uniquement, puis compare le rendu avec une animation de width ou left.

Erreurs fréquentes

• appliquer des valeurs sans vérifier l'impact sur mobile
• surcharger la feuille de style au lieu de simplifier les sélecteurs
• corriger un symptôme visuel sans comprendre la cause (cascade, flux ou dimensions)

Checklist rapide

• la règle est-elle lisible et cohérente avec le reste du module ?
• le rendu reste-t-il correct sur petit écran ?
• la solution est-elle maintenable sans !important ?

Mini défi

Reprends l'exemple de cette leçon, retire une règle inutile, et conserve exactement le même rendu visuel.