CSS Incrementando el rendimiento de la animación usando el atributo `will-change`


Ejemplo

Al crear animaciones y otras acciones pesadas de GPU, es importante entender el atributo will-change .

Tanto los fotogramas clave de CSS como la propiedad de transition utilizan aceleración de GPU. El rendimiento aumenta al descargar los cálculos a la GPU del dispositivo. Esto se hace creando capas de pintura (partes de la página que se representan individualmente) que se descargan en la GPU para calcular. La propiedad will-change le dice al navegador lo que animará, lo que le permite crear áreas de pintura más pequeñas, lo que aumenta el rendimiento.

La propiedad will-change acepta una lista de propiedades separadas por comas para animarlas. Por ejemplo, si planea transformar un objeto y cambiar su opacidad, debe especificar:

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

Nota: Usa la will-change moderación. La configuración will-change de will-change para cada elemento en una página puede causar problemas de rendimiento, ya que el navegador puede intentar crear capas de pintura para cada elemento, aumentando significativamente la cantidad de procesamiento realizado por la GPU.