Как правильно использовать will-change с точки зрения оптимизации?

Например, если элемент будет изменен при клике, то установка will-change при наведении курсора на этот элемент даёт браузеру достаточно времени, чтобы подготовиться к этому изменению.

Но что если вы рассчитываете, что изменение должно произойти при наведении курсора, а не при клике по элементу? Тогда, как уже говорилось, запись, представленная выше, будет бесполезной. В таком случае часто всё же возможно найти какой-либо способ предсказать действие до его осуществления. Например, наведение на родительский элемент изменяемого элемента должно дать нам достаточную фору:

<div id="container">
  <div id="animateMe"></div>
  <button id="startAnimate">Начать анимацию</button>
</div>

#container:hover>#animateMe {
  will-change: transform;
}

var container = document.getElementById("container");
var animateMe = document.getElementById("animateMe");
var button = document.getElementById("startAnimate");

// заметьте, mouseenter на animateMe, а не на container!!!
animateMe.addEventListener("mouseenter", function() {
  this.style.willChange = 'transform, opacity';
});

// и сама анимация
button.addEventListener("click", function() {
  animateMe.style["transform"] = "translate3d(100px,0,0);"
}

.element {
	transition: transform 1s ease-out;
}
.element:hover {
	will-change: transform;
}
.element:active {
	transform: rotateY(180deg);
}