Does will-change CSS property need to be applied also while the element is changing?

Question

I'm trying to make use of the CSS will-change property instead of the translateZ(0) hack.

I understand that the property needs to be applied before the element changes. But my doubt is if it needs to be applied also while it is changing.

I'm interested in knowing if the property needs to be applied before and while the element is transitioning or only before.

Answer 1

You don't need apply will-change while the corresponding CSS property is changing (or changed).

The main goal of will-change is to help browser apply some changes that are expensive for the renderer "in advance" (e.g., create the new stacking context for the element that will change its opacity rather than create it dynamically in the moment when opacity starts changing). If the change already occurs, there is no more need in such pre-optimisations.

Answer 2

The real purpose of will-change property is to warn browser that selected element will change in future processes, so the browser can set up appropriate optimizations ahead.

Some properties will have no effect when specified in will-change, because the browser doesn’t perform any special optimizations for changes in most properties. It is still safe to specify them, though; it’ll simply have no effect. In this case (translate) will-change will have an effect.

It is a good practice to switch will-change on and off on using script code before and after the change occurs, this is the answer to your question.

Reference: https://kolosek.com/css-will-change/