以下回答來(lái)自：https://div.io/topic/1670
我是勤勞的搬運(yùn)工。。。

安卓和 IOS html5 動(dòng)畫(huà)卡頓解決方案
1.IOS 支持彈性滑動(dòng)
body{

-webkit-overflow-scrolling:touch;

}
2.動(dòng)畫(huà)卡頓的解決方案
2.1 改變?cè)匚恢檬褂?css3 新屬性，觸發(fā) GPU (硬件加速)輔助渲染動(dòng)畫(huà) 擴(kuò)展閱讀點(diǎn)這里

2.2 使用 chrome 開(kāi)發(fā)者工具，查看動(dòng)畫(huà)元素是否造成周圍大量 DOM 節(jié)點(diǎn)的重排(reflow)，如果是則對(duì)動(dòng)畫(huà)元素使用 absolute 定位，脫離所在文檔流，減少對(duì)周圍元素的影響。

2.3 對(duì)要做動(dòng)畫(huà)的元素使用backface-visibility,opacity,perspective

這里屬性主要是設(shè)置動(dòng)畫(huà)元素只渲染面向用戶的一面。減少動(dòng)畫(huà)渲染對(duì)系統(tǒng)性能的消耗。

{
-webkit-backface-visibility:hidden;

    backface-visibility:hidden;

    -webkit-perspective: 1000;
            perspective: 1000;

}

用 Mac + iPhone safari 開(kāi)啟開(kāi)發(fā)人員模式之后調(diào)試。