`will-change` în CSS

Performanță și randare Chrome 36, Firefox 36, Safari 9.1

Anunță browserul că o proprietate se va schimba în curând, ca să pregătească din timp randarea (de exemplu un strat separat pe GPU).

Sintaxă CSS

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

Ce face `will-change`

will-change este un indiciu de optimizare. Cu will-change: transform, browserul poate muta elementul pe un strat propriu înainte să înceapă animația, astfel încât primul cadru nu mai are o întârziere vizibilă.

Nu este o proprietate de pus peste tot: fiecare strat suplimentar consumă memorie video. Se folosește punctual, pe elementele care chiar au animații problematice, și ideal se adaugă puțin înainte de animație (de exemplu la :hover pe părinte sau din JavaScript) și se scoate după.

Efect secundar: will-change cu o proprietate care creează context de stivuire (transform, opacity) creează unul imediat, iar cu transform elementul devine bloc de referință pentru copiii cu position: fixed.

Valori uzuale

Valoare	Descriere
`auto`	Fără indiciu; browserul optimizează singur (valoarea implicită).
`transform`	Pregătește elementul pentru mutare, rotire sau scalare.
`opacity`	Pregătește elementul pentru schimbări de opacitate.
`scroll-position`	Anunță că poziția de derulare a elementului se va schimba.
`contents`	Anunță că se va schimba conținutul elementului.

Exemple

Exemplul 1: Meniu lateral care glisează pe telefon

Meniul se animă des, deci merită un strat pregătit.

.meniu-lateral {
  transform: translateX(-100%);
  transition: transform 0.3s ease;
  will-change: transform;
}
.meniu-lateral.deschis {
  transform: translateX(0);
}

Efect vizual în browser

La apăsarea butonului ☰, meniul cu „Produse, Oferte, Contact” intră din stânga fără sacadare la primul cadru, chiar pe telefoane mai slabe.

Exemplul 2: Indiciu adăugat doar înainte de animație

Când cursorul ajunge pe galerie, cardurile se pregătesc; după ieșire, indiciul dispare.

.galerie:hover .card-foto {
  will-change: transform;
}
.card-foto:hover {
  transform: scale(1.05);
  transition: transform 0.2s;
}