如何正確使用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。