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