Cambiará - Trucos CSS | Almanaque CSS 2024

La will-changepropiedad en CSS optimiza las animaciones al permitir que el navegador sepa qué propiedades y elementos están a punto de ser manipulados, aumentando potencialmente el rendimiento de esa operación en particular.

Esta propiedad tiene cuatro valores:

auto: se aplicarán las optimizaciones estándar del navegador.
scroll-position: indica que la posición de desplazamiento del elemento se animará en algún momento en el futuro cercano para que el navegador se prepare para el contenido que no es visible en la ventana de desplazamiento de un elemento.
contents: se espera que el contenido de un elemento cambie para que el navegador no almacene en caché el contenido de este elemento.
: cualquier propiedad definida por el usuario como transformo a la opacityque queramos will-changeaplicar.

Podemos informar al navegador que se va a producir un cambio en la transformpropiedad de la siguiente manera:

.element ( will-change: transform; )

O si queremos declarar varios valores, podemos usar una lista separada por comas como:

.element ( will-change: transform, opacity; )

Sin will-changeembargo, es importante no abusar de la propiedad, ya que podría, de hecho, hacer que la página tenga un rendimiento menor (tenga en cuenta que allesta propiedad no tiene un valor por una buena razón). Como resultado, MDN recomienda que la propiedad se utilice como último recurso para los problemas de rendimiento existentes en lugar de los que anticipa que podrían ocurrir. Y, al usarlo, se recomienda alternar will-changejusto antes de que cambie un elemento o propiedad y luego desactivarlo nuevamente poco después de que finalice el proceso.

Soporte de navegador

Estos datos de soporte del navegador son de Caniuse, que tiene más detalles. Un número indica que el navegador admite la función en esa versión en adelante.