Animation, états, prefers-reduced-motion

Cette leçon fait partie du parcours annuel Code Academy Alfred. Objectif : comprendre transitions, états hover/focus, reduced motion en conditions réelles de conception web / web mobile.

Les micro-interactions guident l’œil. Préfère transition sur opacity/transform (performant).

Focus visible obligatoire : outline ou ring contrasté. Ne retire jamais outline sans alternative.

@media (prefers-reduced-motion: reduce) { * { animation: none; } } respecte les utilisateurs sensibles au mouvement.

Mets en pratique immédiatement : recrée l’exemple, puis modifie-le. La mémorisation vient de la répétition active, pas de la lecture passive.

Si tu bloques, utilise Cursor avec un prompt précis (contexte + objectif + contraintes), puis explique toi-même le diff généré.