區(qū)別：1、js是逐幀動(dòng)畫，每一幀都是由代碼控制，代碼復(fù)雜度高；而css是關(guān)鍵幀動(dòng)畫，補(bǔ)間動(dòng)畫部分由瀏覽器完成，代碼復(fù)雜度低。2、js的動(dòng)畫執(zhí)行在主線程，容易引發(fā)阻塞和等待；css的動(dòng)畫執(zhí)行在合成線程，專事專干，不阻塞主線程。

本教程操作環(huán)境：windows7系統(tǒng)、CSS3&&javascript1.8.5版、Dell G3電腦。

js動(dòng)畫和css動(dòng)畫的區(qū)別

區(qū)別一：

js是逐幀動(dòng)畫，每一幀都是由代碼控制，操作不當(dāng)，極易引發(fā)回流

css是關(guān)鍵幀動(dòng)畫，補(bǔ)間動(dòng)畫部分由瀏覽器完成，便于瀏覽器進(jìn)行優(yōu)化，動(dòng)畫執(zhí)行過程控制的更好

js動(dòng)畫的代碼復(fù)雜度高于CSS動(dòng)畫

區(qū)別二：

js的動(dòng)畫執(zhí)行在主線程，主線程還有其他任務(wù)要執(zhí)行，容易引發(fā)阻塞和等待，降低動(dòng)畫執(zhí)行效率

css的動(dòng)畫執(zhí)行在合成線程，專事專干，不阻塞主線程，合成線程的動(dòng)畫也不會(huì)觸發(fā)回流和重繪

CSS動(dòng)畫

優(yōu)點(diǎn)：

(1)瀏覽器可以對(duì)動(dòng)畫進(jìn)行優(yōu)化。

(2)代碼相對(duì)簡(jiǎn)單,性能調(diào)優(yōu)方向固定

(3)對(duì)于幀速表現(xiàn)不好的低版本瀏覽器，CSS3可以做到自然降級(jí)，而JS則需要撰寫額外代碼

缺點(diǎn)：

1、 運(yùn)行過程控制較弱,無法附加事件綁定回調(diào)函數(shù)。CSS動(dòng)畫只能暫停,不能在動(dòng)畫中尋找一個(gè)特定的時(shí)間點(diǎn)，不能在半路反轉(zhuǎn)動(dòng)畫，不能變換時(shí)間尺度，不能在特定的位置添加回調(diào)函數(shù)或是綁定回放事件,無進(jìn)度報(bào)告

2、 代碼冗長(zhǎng)。想用 CSS 實(shí)現(xiàn)稍微復(fù)雜一點(diǎn)動(dòng)畫,最后CSS代碼都會(huì)變得非常笨重。

JS動(dòng)畫

優(yōu)點(diǎn)：

(1)JavaScript動(dòng)畫控制能力很強(qiáng), 可以在動(dòng)畫播放過程中對(duì)動(dòng)畫進(jìn)行控制：開始、暫停、回放、終止、取消都是可以做到的。

(2)動(dòng)畫效果比css3動(dòng)畫豐富,有些動(dòng)畫效果，比如曲線運(yùn)動(dòng),沖擊閃爍,視差滾動(dòng)效果，只有JavaScript動(dòng)畫才能完成

(3)CSS3有兼容性問題，而JS大多時(shí)候沒有兼容性問題

缺點(diǎn)：

(1)JavaScript在瀏覽器的主線程中運(yùn)行，而主線程中還有其它需要運(yùn)行的JavaScript腳本、樣式計(jì)算、布局、繪制任務(wù)等,對(duì)其干擾導(dǎo)致線程可能出現(xiàn)阻塞，從而造成丟幀的情況。

(2)代碼的復(fù)雜度高于CSS動(dòng)畫

小結(jié)

如果動(dòng)畫只是簡(jiǎn)單的狀態(tài)切換，不需要中間過程控制，在這種情況下，css動(dòng)畫是優(yōu)選方案。

它可以讓你將動(dòng)畫邏輯放在樣式文件里面，而不會(huì)讓你的頁面充斥 Javascript 庫。

然而如果你在設(shè)計(jì)很復(fù)雜的富客戶端界面或者在開發(fā)一個(gè)有著復(fù)雜UI狀態(tài)的 APP。那么你應(yīng)該使用js動(dòng)畫，這樣你的動(dòng)畫可以保持高效，并且你的工作流也更可控。

所以，在實(shí)現(xiàn)一些小的交互動(dòng)效的時(shí)候，就多考慮考慮CSS動(dòng)畫。對(duì)于一些復(fù)雜控制的動(dòng)畫，使用javascript比較可靠。