CSS Aumentare le prestazioni dell'animazione usando l'attributo `will-change`


Esempio

Quando crei animazioni e altre azioni pesanti in GPU, è importante comprendere l'attributo will-change .

Entrambi i fotogrammi chiave CSS e la proprietà di transition utilizzano l'accelerazione GPU. Le prestazioni aumentano scaricando i calcoli sulla GPU del dispositivo. Questo viene fatto creando dei layer di vernice (parti della pagina che vengono singolarmente renderizzati) che vengono scaricati nella GPU per essere calcolati. La proprietà will-change dice al browser cosa si animerà, consentendo al browser di creare aree di disegno più piccole, aumentando così le prestazioni.

La proprietà will-change accetta un elenco di proprietà separate da virgola da animare. Ad esempio, se hai intenzione di trasformare un oggetto e modificarne l'opacità, devi specificare:

.Example{
    ...
    will-change: transform, opacity;
}

Nota: utilizzare will-change con parsimonia. L'impostazione will-change per ogni elemento di una pagina può causare problemi di prestazioni, poiché il browser potrebbe tentare di creare livelli di pittura per ogni elemento, aumentando notevolmente la quantità di elaborazione eseguita dalla GPU.