css實(shí)現(xiàn)動(dòng)畫(huà)：animation transition transform
js實(shí)現(xiàn)動(dòng)畫(huà): setInterval setTimeout requestAnimationFrame
css動(dòng)畫(huà)：
優(yōu)點(diǎn)：
1.集中所有DOM，一次重繪重排拨拓，刷新頻率和瀏覽器刷新頻率相同轮傍。
2.代碼簡(jiǎn)單，方便調(diào)優(yōu)
3.不可見(jiàn)元素不參與重排不同，節(jié)約cpu
4.可以使用硬件加速GPU(translateZ(0))
缺點(diǎn)：
1.對(duì)過(guò)程無(wú)法把控。無(wú)進(jìn)度報(bào)告溶耘，無(wú)回調(diào)函數(shù)二拐。
2.代碼冗長(zhǎng)。
JS動(dòng)畫(huà)：
優(yōu)點(diǎn)：
1.效果炫酷凳兵。
2.過(guò)程控制百新。
缺點(diǎn)：
1.無(wú)法保證執(zhí)行時(shí)間。timeout interval存在同步任務(wù)優(yōu)先執(zhí)行的問(wèn)題庐扫。
2.最小粒度無(wú)法保證在16ms.
requestAnimationFrame的優(yōu)點(diǎn)在于：
1.是瀏覽器針對(duì)動(dòng)畫(huà)提出的API饭望。自動(dòng)優(yōu)化，頁(yè)面不激活狀態(tài)自動(dòng)停止形庭。
2.集中所有dom铅辞，一次重繪就完成，重繪事件跟隨瀏覽器刷新頻率萨醒。
3.隱藏或不可見(jiàn)元素斟珊，不進(jìn)行重繪回流
