Keyframes

@keyframes définit plusieurs étapes d'une animation.

@keyframes pulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.05); }
  100% { transform: scale(1); }
}

.logo {
  animation: pulse 1.2s ease-in-out infinite;
}

Utiliser les animations avec modération.

Réserve ce type d'animation aux éléments qui méritent vraiment d'attirer l'attention (logo, apparition, feedback utilisateur), sans surcharger l'interface.

A retenir

Les @keyframes sont utiles quand une simple transition ne suffit pas, par exemple pour une sequence en plusieurs etapes. Garde une duree courte et un rythme cohérent avec l'usage.

Mini pratique

Cree une animation d'apparition douce (opacity + petit deplacement vertical), et applique-la uniquement au chargement d'une carte importante.

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.