will-change

Definition

Propriété CSS qui informe le navigateur qu'une propriété va changer, lui permettant d'optimiser le rendu à l'avance (promotion en couche composite). À utiliser avec parcimonie.

Analogie

Comme prévenir un serveur qu'on va commander un plat complexe : il peut commencer la préparation.

Exemple de code

.animated {
  will-change: transform;
  transition: transform 0.3s;
}
.animated:hover {
  transform: scale(1.05);
}
/* Retirer après animation si ajouté via JS */

Cas d'usage

Optimiser les animations qui saccadent en promouvant l'élément sur sa propre couche composite.

Anti-pattern

Termes lies