css3動畫性能優化

css3的動畫簡單好用，但是性能方面存在一些問題，很多時候一不留神cpu就已經滿了。

現在記下一些常用的技巧，去優化我們的css3的動畫。

1. translate3d進行gpu加速

寫動畫的時候寫個這個，保證能剛10%以上；

-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）；

2. box-shadow和gradients

這兩個東西在css3里往往都是頁面的性能殺手，計算他們尤其消耗cpu, 尤其是在一個元素同時都使用了它們，所以擁抱扁平化設計吧;

 

3. 性能消耗圖

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

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