為什么css的動畫會消失

以下回答來自：https://div.io/topic/1670
我是勤勞的搬運工。。。

安卓和 IOS html5 動畫卡頓解決方案
1.IOS 支持彈性滑動
body{

-webkit-overflow-scrolling:touch;

}
2.動畫卡頓的解決方案
2.1 改變元素位置使用 css3 新屬性，觸發(fā) GPU (硬件加速)輔助渲染動畫 擴展閱讀點這里

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

2.3 對要做動畫的元素使用backface-visibility,opacity,perspective

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

{
-webkit-backface-visibility:hidden;

    backface-visibility:hidden;

    -webkit-perspective: 1000;
            perspective: 1000;

}

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