Как правильно использовать свойство css will-change?

Question

Может ли кто-нибудь объяснить мне, как правильно использовать это свойство на примере? Я сделал простую демонстрацию: http://jsfiddle.net/zlaja/hnb1qbtv/1/ и мне интересно, где использовать это свойство в CSS или JS?

body { 
    margin: 0; 
} 
.l-header { 
    width: 300px; 
    height: 1000px; 
    background: red; 
    transform: translate3d(-100%, 0, 0); 
    transition: transform 0.3s ease-in-out; 
    will-change: transform; 
    /*Is this the right place ???*/ 
} 
a { 
    position: absolute; 
    right: 10px; 
} 
.toggle-header { 
    transform: translate3d(0, 0, 0); 
} 


<a href="#">Menu</a> 
<header class="l-header"></header> 


var menu = document.querySelector("a"), 
    header = document.querySelector(".l-header"); 

var toogle = function() { 
    header.classList.toggle("toggle-header"); 
} 

menu.addEventListener("click", toogle, false); 

Answer 1

Короткий ответ: это, вероятно, что вы будете часто пары это с JS, чтобы впрыснуть will-change свойство, когда части страницы сделаны интерактивными, чтобы позволить браузеру PErF-оптимизировать их до того, как пользователь взаимодействует с их.

«длинный» ответ: прочитайте Sara Soueidan's article on dev.opera.com.