css3動畫的效能最佳化

標籤：可見   過程   製作   為什麼   img   避免   方法   sha   translate   

目前對提升移動端CSS3動畫體驗的主要方法有幾點：
儘可能多的利用硬體能力，如使用3D變形來開啟GPU加速

-webkit-transform: translate3d(0, 0, 0);-moz-transform: translate3d(0, 0, 0);-ms-transform: translate3d(0, 0, 0);transform: translate3d(0, 0, 0);

 一個元素通過translate3d右移500px的動畫流暢度會明顯優於使用left屬性；

原因是因為：

    CSS動畫屬性會觸發整個頁面的重排relayout、重繪repaint、重組recomposite
    Paint通常是其中最花費效能的，儘可能避免使用觸發paint的CSS動畫屬性，這也是為什麼我們推薦在CSS動畫中使用webkit-transform: translateX(3em)的方案代替使用left: 3em，因為left會額外觸發layout與paint，而webkit-transform只觸發整個頁面composite（這也是為什麼推薦在CSS動畫中使用webkit-transform: translateX(500px)的方案代替使用left: 500px）；

如動畫過程有閃爍（通常發生在動畫開始的時候），可以嘗試下面的Hack：

-webkit-backface-visibility: hidden;-moz-backface-visibility: hidden;-ms-backface-visibility: hidden;backface-visibility: hidden; -webkit-perspective: 1000;-moz-perspective: 1000;-ms-perspective: 1000;perspective: 1000;

 儘可能少的使用box-shadows與gradients

box-shadows與gradients往往都是頁面的效能殺手，尤其是在一個元素同時都使用了它們.

儘可能的讓動畫元素不在文檔流中，以減少重排

position: fixed;position: absolute;

 效能消耗圖

效能消耗圖，由此可見最受歡飲和效能最好的莫過於transform和opacity了。

其實呢，opacity和transform能解決的問題已經很多了，盡量少的使用其他的屬性去進行動畫製作吧

 

css3動畫的效能最佳化