Transform, performance et accessibilité

Animer, c'est bien. Animer sans ralentir l'interface, c'est mieux.

Propriétés à privilégier

Pour des animations fluides, préfère :

• transform
• opacity

Évite d'animer en continu :

• width, height, top, left

Exemple

.card {
  transition: transform 200ms ease, opacity 200ms ease;
}

.card:hover {
  transform: translateY(-4px);
  opacity: 0.96;
}

Accessibilité: reduced motion

Respecte la préférence utilisateur :

@media (prefers-reduced-motion: reduce) {
  * {
    animation: none !important;
    transition: none !important;
  }
}

Bonnes pratiques

• animations courtes (150ms à 300ms pour les micro-interactions)
• même courbe d'accélération dans tout le projet
• animation au service de la compréhension, pas de la décoration excessive

A retenir

Une bonne animation guide l'oeil, renforce l'ergonomie et reste discrète.

Mini pratique

Ajoute un effet hover sur une carte et un bouton. Teste ensuite le rendu avec prefers-reduced-motion activé.

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.