will-change
Una proprietà CSS che avvisa in anticipo il browser che un elemento sta per essere animato o modificato, così da poter preparare un'ottimizzazione (ad esempio spostarlo su un proprio livello di compositing della GPU). Potente, ma facile da usare male.
Il meccanismo: will-change: transform dice al browser «questo verrà trasformato a breve», che può quindi promuovere l'elemento a un livello proprio, animabile dalla GPU in modo fluido, così il primo fotogramma dell'animazione non scatta mentre il livello viene creato. Caso d'uso: elementi che si sa che verranno animati al passaggio del mouse o all'interazione. Avvertenze importanti: (1) non abusarne, perché ogni livello promosso costa memoria e will-change su tutto consuma risorse e può rallentare la pagina; (2) l'ideale è impostarlo poco prima dell'animazione (ad esempio in hover) e rimuoverlo dopo, non lasciarlo fisso nel CSS; (3) è un suggerimento, non una garanzia. Nota a margine: transform e opacity sono le proprietà «economiche» da animare (solo compositing, nessun nuovo layout). Uno strumento di prestazioni affilato, ma a doppio taglio.