如何正确使用css将改变属性？

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属性时，页面的部分进行交互，允许用户之前与交互浏览器穿孔 - 优化他们他们。

“长”的答案：阅读Sara Soueidan's article on dev.opera.com。