移動端css動畫優(yōu)化
css3的動畫已經(jīng)應(yīng)用得十分廣泛了泊交，很多效果在pc的瀏覽器上表現(xiàn)完美锄弱，但是遷移到移動端簡直卡得讓人抓狂他托，尤其是安卓手機，蘋果手機表現(xiàn)相對好很多甩苛。這個卡頓現(xiàn)象是無法完全避免的蹂楣，只能優(yōu)化。下面提供一些優(yōu)化的原則：
1.開啟3d變形來開啟GPU加速：
transform：translateZ(0)讯蒲；
優(yōu)點: 方法簡單粗暴痊土，但是很有效，動畫效果確實會流暢很多.
缺點： 對手機的性能開銷很大墨林，可以明顯的感覺到發(fā)熱變嚴重赁酝。還有一個很讓人郁悶的現(xiàn)象就是會影響到絕對定位的元素。eg：曾經(jīng)遇到過頁面向上滾動的時候萌丈，絕對定位的元素比頁面滾動的速度慢赞哗，產(chǎn)生跳躍現(xiàn)象。
解決方案：目前沒有辦法完全的避免掉這個問題辆雾，可以選擇在動畫開始前開啟加速，然后在動畫結(jié)束后去除掉GPU加速月劈。
2.動畫過程有閃爍的情況時度迂，可以試試：
backface-visibility: hidden;
perspective: 1000;
3.動畫一般會觸發(fā)頁面的重排，重繪猜揪，重組,其中重繪對性能的影響最大惭墓，所以如果有觸發(fā)重繪的操作最好用用別的來替代。
比如說：位置的移動而姐，變化left就不如使用transform
