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