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