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

Question

I found CSS will-change^{W3.org docs, MDN docs} property (which already works in Chrome and is partiali supported by Firefox and Opera) but I\'m not rea

Answer 1

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