Vai-mudar - CSS-Tricks | CSS Almanac 2025

A will-changepropriedade em CSS otimiza animações permitindo que o navegador saiba quais propriedades e elementos estão prestes a ser manipulados, aumentando potencialmente o desempenho dessa operação específica.

Esta propriedade possui quatro valores:

auto: as otimizações padrão do navegador serão aplicadas.
scroll-position: indica que a posição de rolagem do elemento será animada em algum momento no futuro próximo, de modo que o navegador se preparará para o conteúdo que não é visível na janela de rolagem de um elemento.
contents: espera-se que o conteúdo de um elemento mude para que o navegador não armazene em cache o conteúdo desse elemento.
: qualquer propriedade definida pelo usuário, como transformou à opacityqual desejamos will-changeser aplicados.

Podemos informar ao navegador que uma mudança está prestes a ocorrer na transformpropriedade, como:

.element ( will-change: transform; )

Ou se quisermos declarar vários valores, podemos usar uma lista separada por vírgulas, como:

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

É importante não usar demais a will-changepropriedade, pois isso pode, de fato, fazer com que a página tenha menos desempenho (observe que não há um allvalor para essa propriedade por um bom motivo). Como resultado, o MDN recomenda que a propriedade seja usada como último recurso para problemas de desempenho existentes, em vez daqueles que você prevê que possam acontecer. E, ao usá-lo, é recomendável alternar will-changepouco antes de um elemento ou propriedade ser alterado e, em seguida, desativá-lo novamente logo após a conclusão do processo.

Suporte de navegador

Os dados de suporte deste navegador são do Caniuse, que tem mais detalhes. Um número indica que o navegador oferece suporte ao recurso nessa versão e superior.