La regola d'oro delle animazioni CSS: anima solo `transform` e `opacity`. Sono le uniche proprietà che il browser gestisce nel thread del compositor senza toccare il layout. Tutto il resto — `width`, `height`, `top`, `left` — triggera il reflow e distrugge il 60fps.
L'animazione di entrata più efficace che uso: `opacity: 0` → `opacity: 1` combinata con `transform: translateY(20px)` → `translateY(0)`. Due valori, `transition: opacity 0.3s ease, transform 0.3s ease`. Niente di più.
Il `prefers-reduced-motion` non è opzionale. Avvolgere tutte le animazioni decorative in un media query `@media (prefers-reduced-motion: no-preference)` è obbligatorio — per accessibilità e perché alcuni utenti sul serio soffrono di motion sickness con certi effetti.