Animazioni CSS performanti: cosa funziona e cosa no
Non tutte le animazioni CSS sono uguali. Alcune causano repaint costosi, altre vanno sul compositor thread e sono quasi gratis. La differenza fa tutto.
La regola fondamentale è: anima solo transform e opacity. Queste due proprietà vengono gestite dal compositor thread senza coinvolgere il main thread. Tutto il resto — width, height, top, left, background-color, border — causa layout o paint, che sono operazioni costose che bloccano il main thread e producono jank.
will-change: transform è il tuo migliore amico per animazioni complesse. Suggerisce al browser di creare un layer dedicato per l'elemento prima che l'animazione inizi. Attenzione però: non metterlo su tutto. Ogni layer composited consuma memoria GPU. Usalo solo sugli elementi che sai che animerai e rimuovilo quando l'animazione finisce.
Per le animazioni di entrata (reveal on scroll), preferisco CSS transitions attivate da classi JavaScript piuttosto che Web Animations API o librerie. Il pattern: elemento parte con opacity:0 e transform:translateY(20px), la classe .is-visible applicata via IntersectionObserver porta entrambe a 0/1. Semplice, performante, accessibile con prefers-reduced-motion.