一、兩者的主要區(qū)別
先開(kāi)門(mén)見(jiàn)山的說(shuō)說(shuō)兩者之間的區(qū)別。
1）CSS動(dòng)畫(huà)：
基于CSS的動(dòng)畫(huà)一般由瀏覽器“主線(xiàn)程”之外的獨(dú)立線(xiàn)程處理，在其中執(zhí)行樣式、布局、繪制和 JavaScript。
使用CSS動(dòng)畫(huà)，允許對(duì)單個(gè)動(dòng)畫(huà)關(guān)鍵幀、持續(xù)時(shí)間和迭代進(jìn)行更多控制。
但缺乏表現(xiàn)力，并且很難有意義地組織動(dòng)畫(huà)，這意味著創(chuàng)造動(dòng)畫(huà)會(huì)帶來(lái)較高的復(fù)雜度和錯(cuò)誤率。
2）JavaScript動(dòng)畫(huà)：
在瀏覽器主線(xiàn)程的JavaScript中運(yùn)行，主線(xiàn)程已經(jīng)忙于運(yùn)行其他的JavaScript，樣式的計(jì)算，布局還有繪制。線(xiàn)程內(nèi)存在資源競(jìng)爭(zhēng)，這實(shí)質(zhì)上增加了掉幀的風(fēng)險(xiǎn)。
基于JavaScript的動(dòng)畫(huà)靈活性更高，完全控制元素在每個(gè)步驟，能更好的實(shí)現(xiàn)復(fù)雜的動(dòng)畫(huà)和大量的交互（例如當(dāng)要求所有的元素在頁(yè)面加載時(shí)順次加載顯示出來(lái)）
對(duì)于多元素多步驟的動(dòng)畫(huà)序列、交互拖拽動(dòng)畫(huà)等，用JavaScript實(shí)現(xiàn)則是上選。
