Propriété CSS will-change

La propriété will-change donne au navigateur un indice sur la façon dont un élément est censé changer dans un avenir proche, afin qu'il puisse mettre en place les optimisations nécessaires avant que le changement ne se produise — plutôt que de s'empresser d'optimiser à la première image du changement.

Cette page explique ce que fait will-change, quand (et quand ne pas) l'utiliser, ses valeurs acceptées, un exemple interactif, et les pièges qui en font une propriété facile à mal utiliser.

Pourquoi will-change existe

Des propriétés comme transform et opacity sont peu coûteuses à animer parce que le navigateur peut promouvoir l'élément vers sa propre couche de composition (une surface séparée que le GPU peut déplacer, fondu ou mettre à l'échelle sans repeindre le reste de la page). Créer cette couche coûte cependant du temps et de la mémoire. Si le navigateur ne découvre qu'il a besoin d'une couche qu'au moment où une animation démarre, la première image peut être saccadée.

will-change vous permet d'indiquer au navigateur à l'avance quelles propriétés sont sur le point de changer, afin qu'il puisse préparer la couche en amont et garder l'animation fluide dès la toute première image.

Les valeurs sont séparées par des virgules. La propriété will-change accepte ces valeurs : auto, un <custom-ident> tel qu'un nom de propriété (transform, opacity, scroll-position, …), initial, inherit ou unset.

Avertissement

Cette propriété doit être utilisée avec précaution. Les différents navigateurs gèrent cette propriété différemment, et en abuser peut amener le navigateur à l'ignorer. Un usage excessif peut également forcer des couches de composition inutiles, augmentant la consommation mémoire et dégradant les performances.

Utilisation correcte de la propriété will-change

Ne l'appliquez pas à trop d'éléments. Chaque indice will-change peut forcer le navigateur à maintenir une couche de composition active, ce qui consomme de la mémoire. Donner des indices à des centaines d'éléments peut ralentir la page au lieu de l'accélérer.
Ajoutez-la et supprimez-la par script, autour du changement. Définissez will-change juste avant le changement (par exemple sur mouseenter ou focus), puis supprimez-la une fois l'animation terminée pour que le navigateur puisse libérer la couche.
Ne l'utilisez pas comme optimisation prématurée. Si une page s'anime déjà de façon fluide, laissez-la telle quelle. Recourez à will-change uniquement pour résoudre un problème de performance mesuré — c'est un dernier recours, pas un comportement par défaut.
Donnez au navigateur le temps de se préparer. L'intérêt de will-change est d'avertir le navigateur avant le changement. La définir sur la même image que le démarrage de l'animation annule l'effet escompté.
Sachez qu'elle peut affecter le rendu. Les valeurs qui créent un contexte d'empilement (comme will-change: opacity ou will-change: transform) peuvent modifier la façon dont l'élément se superpose à ses voisins, tout comme le ferait l'application effective de ces propriétés.

Valeur initiale	auto
S'applique à	Tous les éléments.
Hérité	Non.
Animatable	Non.
Version	CSS Transitions Module Level 1
Syntaxe DOM	`object.style.willChange = "transform";`

Remarque : en JavaScript, le nom de la propriété utilise le camelCase (willChange), tandis que la propriété CSS utilise des tirets (will-change).

Syntaxe

Valeurs CSS will-change

will-change: auto | <custom-ident> | initial | inherit | unset;

Exemple de la propriété will-change :

Exemple de code CSS will-change

<!DOCTYPE html>
<html>
  <head>
    <title>The title of the document</title>
    <style>
      .circle {
        width: 50px;
        height: 50px;
        transform: translate(50px, 0px);
        border-radius: 30px;
      }
      .circle.blue {
        background: #1c87c9;
        will-change: transform;
      }
      .circle.green {
        background: #8ebf42;
      }
    </style>
  </head>
  <body>
    <h2>Will-change property example</h2>
    <div class="circle green"></div>
    <div class="circle blue"></div>
    <div class="circle green"></div>
    <div class="circle blue"></div>
    <div class="circle green"></div>
    <script>
      const circles = document.getElementsByClassName("circle blue");
      function update(t) {
        for (let i = 0; i < circles.length; i++) {
          const xpos = Math.sin(t / 1000 + 1000 * i) * 50 + 50;
          circles[i].style.transform = "translate(" + xpos + "px, 0px)";
        }
        window.requestAnimationFrame(update);
      }
      update();
    </script>
  </body>
</html>

Essayez vous-même »

Définir et supprimer will-change par script

Le modèle recommandé consiste à ajouter l'indice juste avant une interaction et à le supprimer ensuite, afin que le navigateur ne maintienne la couche que le temps nécessaire :

.card {
  transition: transform 0.3s;
}
/* Hint the browser only while the user hovers. */
.card:hover {
  will-change: transform;
  transform: scale(1.05);
}

Pour les animations de longue durée ou pilotées par JavaScript, basculez-la dans le code :

const el = document.querySelector(".card");
// Prepare ahead of the change.
el.addEventListener("mouseenter", () => {
  el.style.willChange = "transform";
});
// Release the optimization once it's no longer needed.
el.addEventListener("animationend", () => {
  el.style.willChange = "auto";
});

Valeurs

Valeur	Description
auto	L'optimisation standard du navigateur est appliquée.
`<custom-ident>`	Spécifie la propriété CSS censée changer ou être animée sur l'élément dans un avenir proche. Si la propriété est un raccourci, les changements se propageront à toutes ses propriétés longues.
initial	Force la propriété à utiliser sa valeur par défaut.
inherit	Hérite la propriété de son élément parent.
unset	Réinitialise la propriété à sa valeur héritée ou initiale, selon la propriété.

Propriétés associées

will-change est un indice de performance pour les propriétés que vous animez réellement. Elle s'associe naturellement à :

transform — la cible la plus courante de will-change, car les transformations sont adaptées au GPU.
opacity — également composité et cible fréquente pour les fondus.
transition et animation — les mécanismes qui pilotent les changements pour lesquels vous donnez des indices.
z-index — pertinent car certaines valeurs de will-change créent un nouveau contexte d'empilement.

Pratique

La propriété CSS will-change peut avoir les valeurs suivantes, sauf :