I found CSS `will-change`&lt;sup&gt;[W3.org docs](http://dev.w3.org/csswg/css-will-change/), [MDN docs](https://developer.mozilla.org/en-US/docs/Web/CSS/will-change)&lt;/sup&gt; property (which already works in Chrome and is partiali supported by Firefox and Opera) but I&#39;m not really sure how it works.
Does anybody know something more about this mysterious thing?

I have just read that it allows browser to prepare for calculation over the element in the future.
I don&#39;t want to misunderstand it. So I have a few questions.

1. Should I add this property to the element class or its hover state?


        .my-class{
            will-change: &#39;opacity, transform&#39;
        }
        .my-class:hover{
            opacity: 0.5
        }
        .my-class:active{
            transform: rotate(5deg);
        }


   OR
       
        .my-class{
            ...
        }
        .my-class:hover{
            will-change: &#39;opacity&#39;
            opacity: 0.5
        }
        .my-class:active{
            will-change: &#39;transform&#39;
            transform: rotate(5deg);
        }

2. How can it increase a browser performance? Theoretically, when CSS is loaded, the browser already &quot;knows&quot; what will happen with each element, doesn&#39;t it?

If you can add any good example illustrating how to use it efficiently, I will be grateful :)

All Will Change Solutions on Gang of Coders

Total of 1 Will Change Solutions

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