How to use and how works CSS' will-change property?

I won't copy paste the entire article here but here's a tl;dr version:

Specifying what exactly you want to change allows the browser to make better decisions about the optimizations that it needs to make for these particular changes. This is obviously a better way to achieve a speed boost without resorting to hacks and forcing the browser into layer creations that may or may not be necessary or useful.

How to use it:

will-change: transform, opacity;

How not to use it:

will-change: all;

.potato:hover {
  will-change: opacity;
  opacity:1;
}

Specifying will-change on hover has no effect:

Setting will-change on an element immediately before it changes has little to no effect. (It might actually be worse than not setting it at all. You could incur the cost of a new layer when what you’re animating wouldn’t have previously qualified for a new layer!)

I spent some time on searching how will-change property works and how we use it. I hope, it will be useful summary. Thanks everybody for answers.

1. Layers Hack / Null Transform Hack

In 'ancient times' (like 2 years ago) somebody discovered that you can draw your CSS animation faster.

How does it work?

If you add transform: translateZ(0) to a css selector, it will force a browser to move the element with this selector to the new compositor layer. What is more, it will increase performance (in most situations, use powers of GPU instead CPU) read more here.

2. Bye Bye hacks, welcome "will-change:"

Probably, it's too early to say bye bye to Layer Hack, but this time will come shortly. The new property will change appeared in specs of CSS and will be a great successor of layer hack.

3. Browser support

For now, it's available in Chrome and Opera and partially supported by Firefox as well.

4. How to use it properly

Don’t use will-change anywhere in your CSS until after you will complete implementing your animations. Only then should you go back to your CSS and apply will-change. More

This is probably the most valuable advice that you can get.

There is no point to use it straight before an action begins by e.g. adding it to the :hover state of a selector. Because browser will not have required time to prepare optimization before change occurrence. Browser will need approx. 200ms to apply optimization, so for example it is better to add will-change to a element when a parent element is on hover state. More

Example:

 .parent:hover .change{
     will-change: opacity;
 }
 .change:hover{
    opacity: .5;
 }

You need to use it really sparingly. If you want to optimize everything, the results will be opposite than expected ones. will-change forces browser to keep optimization turned on and reserve resources like memory for changes in the future which may never happen. It is recommended to turn off will-change afterwards, when it is not necessary anymore e.g. when the animation is finished.

You can do it easily using JavaScript document.getElementById('my_element_id').style.willChange = off;

Now with the help of CSS you can do various of animations, and sometimes this animation becomes a bottleneck for a CPU. So instead of doing this job on a CPU, it would be nice to use GPU for this task. And not so long ago people started to use a trick to do this for a 2D transformation by doing something like:

.accelerate {
  -webkit-transform: translate3d(0, 0, 0);
}

This made a browser think that it is doing a 3D transformation, and because all 3D transformations are using GPU, this will offload CPU. This looks hacky (because in fact it is) and will-change property is going to change this by informing the browser to look out for changes in the future, and optimize and allocate memory accordingly.

Based on W3C draft,

The will-change CSS property … allows an author to inform the UA ahead of time of what kinds of changes they are likely to make to an element. This allows the UA to optimize how they handle the element ahead of time, performing potentially-expensive work preparing for an animation before the animation actually begins.

Good idea to use will-change is to let the browser know in advance what changes on an element can be expected. This allows the browser to make the proper optimizations in advance, which leads to quicker rendering.

This information was taken from this excellent explanation about will-change property. The article has additional example when it is nice to use it and when it is useless or even detrimental