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!)