will-change

Ejemplos

Optimizando con will change

Usa las utilidades will-change-scroll, will-change-contents y will-change-transform para optimizar un elemento que se espera que cambie en un futuro cercano, instruyendo al navegador para preparar la animación necesaria antes de que realmente comience:

<div class="overflow-auto will-change-scroll">
  <!-- ... -->
</div>

Se recomienda que apliques estas utilidades justo antes de que un elemento cambie, y luego las elimines poco después de que termine usando will-change-auto.

La propiedad will-change está pensada para ser utilizada como último recurso cuando se trata de problemas de rendimiento conocidos. Evita usar estas utilidades en exceso, o simplemente en anticipación a problemas de rendimiento, ya que en realidad podría hacer que la página sea menos eficiente.

Usando un valor personalizado

Usa la sintaxis will-change-[<value>] para establecer el propiedad will-change basado en un valor completamente personalizado:

<div class="will-change-[top,left] ...">
  <!-- ... -->
</div>

Para variables CSS, también puedes usar la sintaxis will-change-(<custom-property>) :

<div class="will-change-(--my-properties) ...">
  <!-- ... -->
</div>

Esto es solo un atajo para will-change-[var(<custom-property>)] que agrega la función var() por ti automáticamente.