一丶jq/zepto animate()要領

• 能夠細化操縱，回調要領，然則在挪動端（安卓）卡頓

二丶css3 animation

• 能夠用@keyframes細化過渡效果，沒有回調操縱，只能監控animation/transition是不是已完成。

三丶transform 過渡top/left 致使重繪，手機機能不好時依舊卡頓

• 運用相對位置定位頁面上的動畫元素，將其離開文檔流，能夠有用的防備重排。
• 運用transform:translateY/X來挪動元素 scale()縮放元素
• 加上 -webkit-transform: translate3d(0,0,0); transform: translate3d(0,0,0); 開啟GPU硬件加速
• [參考鏈接]http://blog.csdn.net/majun000…

四丶RequestAnimationFrame

假如你須要細化過渡效果，然則運用setTimeout可能在機能不夠的手機上照樣會湧現卡頓的狀況，我就碰到了如許的狀況。 setTimeout會存在過分繪製，會形成幀喪失，繼而致使動畫斷續顯現。這也是setTimeout的定時器值引薦最小運用16.7ms的緣由（16.7 = 1000 / 60, 即每秒60幀）。而requestAnimationFrame是隨着瀏覽器繪製來的，不會存在過分繪製，也就不會湧現動畫卡頓的狀況。
參考鏈接代碼

五丶碰到的坑

• 元素display:none的時刻是拿不到transform的值（其他屬性沒試），解決辦法：用visibility: hidden;
• 過渡動畫的時刻，先讓元素display:block 立時實行css3動畫，效果瀏覽器直接疏忽過渡動畫，襯着末了的效果。

  解決辦法：運用延時器(1ms)，耽誤一點css3動畫的實行。