Propiedad CSS will-change
Usa la propiedad CSS will-change para indicar cómo se espera que cambie un elemento en el futuro. Lee sobre la propiedad y prueba ejemplos.
La propiedad will-change le da al navegador una pista sobre cómo se espera que cambie un elemento en un futuro cercano, para que el navegador pueda establecer las optimizaciones necesarias antes de que el cambio ocurra realmente, en lugar de tener que optimizar a toda prisa en el mismo fotograma en que comienza el cambio.
Esta página explica qué hace will-change, cuándo (y cuándo no) usarla, sus valores aceptados, un ejemplo ejecutable y los errores que hacen que sea fácil de usar mal.
Por qué existe will-change
Propiedades como transform y opacity son económicas de animar porque el navegador puede promocionar el elemento a su propia capa de composición (una superficie separada que la GPU puede mover, desvanecer o escalar sin repintar el resto de la página). Sin embargo, crear esa capa tiene un costo en tiempo y memoria. Si el navegador solo descubre que necesita una capa en el momento en que comienza una animación, el primer fotograma puede tartamudear.
will-change te permite indicarle al navegador con anticipación qué propiedades están a punto de cambiar, para que pueda preparar la capa de antemano y mantener la animación fluida desde el primer fotograma.
Los valores se separan con comas. La propiedad will-change acepta estos valores: auto, un <custom-ident> como el nombre de una propiedad (transform, opacity, scroll-position, …), initial, inherit o unset.
Esta propiedad debe usarse con precaución. Los distintos navegadores la manejan de manera diferente, y abusar de ella puede hacer que el navegador la ignore. El uso excesivo también puede forzar capas de composición innecesarias, aumentando el uso de memoria y degradando el rendimiento.
Uso correcto de la propiedad will-change
- No la apliques a demasiados elementos. Cada pista de
will-changepuede obligar al navegador a mantener una capa de composición activa, lo que consume memoria. Aplicarla a cientos de elementos puede ralentizar la página en lugar de acelerarla. - Agrégala y elimínala con script, alrededor del cambio. Establece
will-changejusto antes del cambio (por ejemplo, enmouseenterofocus), y luego elimínala una vez que la animación termine para que el navegador pueda liberar la capa. - No la uses como una optimización prematura. Si una página ya se anima de forma fluida, déjala como está. Recurre a
will-changeúnicamente para solucionar un problema de rendimiento medido: es un último recurso, no una opción predeterminada. - Dale tiempo al navegador para prepararse. El objetivo de
will-changees advertir al navegador con anticipación sobre el cambio. Establecerla en el mismo fotograma en que comienza la animación anula el propósito. - Ten en cuenta que puede afectar al renderizado. Los valores que crean un contexto de apilamiento (como
will-change: opacityowill-change: transform) pueden cambiar cómo el elemento se superpone a sus hermanos, igual que si se establecieran esas propiedades realmente.
| Valor inicial | auto |
|---|---|
| Se aplica a | Todos los elementos. |
| Heredada | 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 CSS de will-change
will-change: auto | <custom-ident> | initial | inherit | unset;Ejemplo de la propiedad will-change:
Ejemplo de código CSS will-change
<!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>Establecer y borrar will-change con script
El patrón recomendado es agregar la pista justo antes de una interacción y eliminarla después, para que el navegador solo mantenga la capa mientras sea necesario:
.card {
transition: transform 0.3s;
}
/* Hint the browser only while the user hovers. */
.card:hover {
will-change: transform;
transform: scale(1.05);
}Para animaciones de mayor duración o controladas por JavaScript, actívala y desactívala en código:
const el = document.querySelector(".card");
// Prepare ahead of the change.
el.addEventListener("mouseenter", () => {
el.style.willChange = "transform";
});
// Release the optimization once it's no longer needed.
el.addEventListener("animationend", () => {
el.style.willChange = "auto";
});Valores
| Valor | Descripción |
|---|---|
| auto | Se aplica la optimización estándar del navegador. |
<custom-ident> | Especifica la propiedad CSS que se espera que cambie o se anime en el elemento en un futuro cercano. Si la propiedad es una abreviatura, los cambios se expandirán a todas sus propiedades extendidas. |
| 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, según la propiedad. |
Propiedades relacionadas
will-change es una pista de rendimiento para las propiedades que realmente animas. Se combina de forma natural con:
transform— el objetivo más común dewill-change, ya que las transformaciones son compatibles con la GPU.opacity— también compuesta y un objetivo frecuente para los desvanecimientos.transitionyanimation— los mecanismos que impulsan los cambios sobre los que estás dando pistas.z-index— relevante porque algunos valores dewill-changecrean un nuevo contexto de apilamiento.