Propiedad will-change de CSS

La propiedad will-change le da al navegador una pista sobre cómo se espera que cambie un elemento en un futuro cercano. Las optimizaciones deben configurarse antes de que ocurra el cambio.

La propiedad will-change fue propuesta originalmente como will-animate antes de ser renombrada.

La propiedad will-change permite a los navegadores optimizar el diseño, la pintura o múltiples propiedades CSS de un elemento. Sin embargo, especificar muchas propiedades no mejorará el rendimiento.

Los valores deben estar separados por comas. La propiedad will-change puede tener los siguientes valores: auto, <custom-ident>, initial, inherit o unset.

advertencia
Esta propiedad debe usarse con precaución. Diferentes navegadores manejan esta propiedad de manera distinta, y su uso excesivo puede hacer que el navegador la ignore. El uso excesivo también puede forzar la creación de capas de composición innecesarias, aumentando el uso de memoria y degradando el rendimiento.

Uso adecuado de la propiedad will-change:

La propiedad will-change no debe aplicarse a demasiados elementos. Su uso excesivo puede ralentizar la velocidad de carga de la página y consumir recursos excesivos.
Al usar la propiedad will-change, es mejor agregarla y quitarla mediante script antes y después de que ocurra el cambio.
La propiedad will-change no debe usarse para una optimización prematura. No es necesario agregar will-change a los elementos si una página ya funciona bien. Esta propiedad debe usarse como último recurso para abordar problemas de rendimiento existentes.
El navegador necesita tiempo para aplicar las optimizaciones. La propiedad will-change está destinada a informar al navegador sobre las propiedades que se esperan que cambien con anticipación.
La propiedad will-change puede afectar la apariencia visual de un elemento cuando se usa con valores que crean un contexto de apilamiento.

Valor inicial	auto
Se aplica a	Todos los elementos.
Heredable	No.
Animable	No.
Versión	CSS Transitions Module Level 1
Sintaxis DOM	`object.style.willChange = "transform";`

Nota: En JavaScript, el nombre de la propiedad usa camelCase (willChange), mientras que la propiedad CSS usa guiones (will-change).

Sintaxis

Valores de will-change en CSS

css

will-change: auto | <custom-ident> | initial | inherit | unset;

Ejemplo de la propiedad will-change:

Ejemplo de código CSS will-change

html

<!DOCTYPE html>
<html>
  <head>
    <title>The title of the document</title>
    <style>
      .circle {
        width: 50px;
        height: 50px;
        transform: translate(50px, 0px);
        border-radius: 30px;
      }
      .circle.blue {
        background: #1c87c9;
        will-change: transform;
      }
      .circle.green {
        background: #8ebf42;
      }
    </style>
  </head>
  <body>
    <h2>Will-change property example</h2>
    <div class="circle green"></div>
    <div class="circle blue"></div>
    <div class="circle green"></div>
    <div class="circle blue"></div>
    <div class="circle green"></div>
    <script>
      const circles = document.getElementsByClassName("circle blue");
      function update(t) {
        for (let i = 0; i < circles.length; i++) {
          const xpos = Math.sin(t / 1000 + 1000 * i) * 50 + 50;
          circles[i].style.transform = "translate(" + xpos + "px, 0px)";
        }
        window.requestAnimationFrame(update);
      }
      update();
    </script>
  </body>
</html>

Try it Yourself »

Valores

Valor	Descripción
auto	Se deben aplicar las optimizaciones estándar del navegador.
`<custom-ident>`	Especifica la propiedad CSS que se espera que cambie o anime en el elemento en un futuro cercano. Si la propiedad es un atajo, los cambios se expandirán a todas sus propiedades individuales.
initial	Hace que la propiedad use su valor predeterminado.
inherit	Hereda la propiedad de su elemento padre.
unset	Restablece la propiedad a su valor heredado o inicial, dependiendo de la propiedad.

Propiedad will-change de CSS ​

Uso adecuado de la propiedad will-change: ​

Sintaxis ​

Ejemplo de la propiedad will-change: ​

Valores ​

Practice ​

Propiedad will-change de CSS

Uso adecuado de la propiedad will-change:

Sintaxis

Ejemplo de la propiedad will-change:

Valores

Practice