Transition
.bouton { transition: transform .2s ease, background-color .2s; }
.bouton:hover { transform: translateY(-2px) scale(1.05); }
Animation
@keyframes apparait { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; } }
.carte { animation: apparait .4s ease-out both; }
@keyframes tourne { to { transform: rotate(360deg); } }
.chargement { animation: tourne 1s linear infinite; }
Bonnes pratiques
- Animer
transform et opacity (fluides), éviter width, top. - Durées courtes (150-400 ms) pour l'interface.
- Respecter
prefers-reduced-motion.
