Skip to main content

Will-change | CSS

  • Will-change | CSS

A propriedade will-change é uma dica de desempenho para o navegador. Ela informa quais propriedades de um elemento provavelmente mudarão em breve, permitindo que o navegador otimize o renderizador com antecedência.

📘 Explicação direta​

No seu código:

.hero .btn-primary,
.hero .btn-secondary {
  ...
  will-change: transform;
}

Isso diz ao navegador:

“Este botão vai mudar sua transformação (transform) com frequência — prepare-se para isso.”

O navegador então pode, por exemplo:

  • Promover o elemento a uma camada de composição (usando GPU)
  • Evitar repinturas desnecessárias quando a propriedade mudar
  • Tornar animações e transições mais suaves

⚙️ Quando usar​

Use will-change somente quando você sabe que uma propriedade será animada ou transformada com frequência, como:

:hover { transform: scale(1.05); }

ou

animation: mover 2s infinite;

O navegador pode otimizar antecipadamente essas operações.

⚠️ Cuidados importantes​

  • ❌ Não abuse de will-change. Cada elemento com essa propriedade pode criar uma nova camada de renderização, aumentando o consumo de memória e o custo de composição.

  • ✅ Use-a apenas em elementos animados com frequência, como botões interativos, menus, cartões com hover, etc.

  • 🧠 Se a animação for esporádica, prefira aplicar will-change via JavaScript pouco antes da animação começar e removê-la depois:

button.addEventListener("mouseenter", () => {
  button.style.willChange = "transform";
});

button.addEventListener("mouseleave", () => {
  button.style.willChange = "auto";
});

🧩 Outras propriedades comuns em will-change​

Você pode otimizar várias propriedades possíveis, por exemplo:

will-change: opacity, transform, scroll-position;

Mas lembre-se: quanto mais propriedades você adicionar, maior o impacto de memória.

🔹 Em resumo​

FunçãoDescrição
O que fazInforma ao navegador quais propriedades irão mudar
Por que usarMelhora a fluidez e o desempenho de animações
Melhor usoElementos com transform, opacity, ou scroll animados com frequência
CuidadoPode aumentar o uso de memória se abusado