最近在學習一份來自git的動畫框架源碼，看懂70%的核心代碼後，打算自己動手實踐一版，然鵝，所有框架搭起來以後，在動畫這塊卻出了問題：

想設計一個slideInLeft的動畫，必然想到了要從偏移-10%的位置，移動到0的位置，於是，樂呵呵的寫上一筆代碼：

@keyframes fadeInLeft{
from{transform:translate3d(-100px,0,0);}
to{transform:translate3d(0px,0,0);}
}

自認為，邏輯嚴密沒有任何問題，初始幀、結束幀都有了，氮素，為什麽沒有動畫捏？看了git的動畫源碼，哦，我忘記加火狐的私有屬性前綴了，於是hin開心的加上：

@keyframes fadeInLeft{
from{transform:translate3d(-100px,0,0);}
to{transform:translate3d(0px,0,0);}
}

@-webkit-keyframes fadeInLeft{
from{-webkit-transform:translate3d(-100px,0,0);transform:translate3d(-100px,0,0);}
to{-webkit-transform:translate3d(0,0,0);transform:translate3d(0px,0,0);}
}

刷新頁面，動畫動起來了，之前嚇的我差點對我寫了一上午的動畫插件失去信心o(╥﹏╥)o。。。

綜上可見，尤其對css3的新屬性而言，瀏覽器私有屬性前綴，是多麽的重要，然鵝，如果要知道每個屬性的瀏覽器私有前綴，必須每用一個就去mdn或者w3查一遍，好不麻煩，於是度娘一下，“如何不全css前綴”，這一百度不要緊，排名前幾的答案無一例外都是回復：autoprefixer,不明白什麽東西，根據鏈接點開一看：

是不是很驚喜，意外？你只需要按照標準寫法編寫左側代碼，右側會自動生成兼容各個瀏覽器版本的帶前綴寫法，是不是很酷炫，而且你還可以根據網站的兼容性設置向前兼容的版本數，一般來說，向前兼容越少，生成的補全代碼也越精簡，因為後代瀏覽器的兼容性、對css3標準的實現肯定是越來越棒噠~

就此記錄一下，神器autoPrefixer,你最美~

前端css3樣式前綴自動補全工具--autoprefixer