我們經(jīng)常面臨一個(gè)抉擇：是使用JavaScript的動(dòng)畫還是使用CSS的動(dòng)畫，下面將對(duì)比一下這兩種方式

JS動(dòng)畫

優(yōu)點(diǎn)：JavaScript的動(dòng)畫與CSS預(yù)先定義好的動(dòng)畫不同，可以在其動(dòng)畫過程中對(duì)其進(jìn)行控制：開始、暫停、回放、中止、取消都是可以做到的。而且一些動(dòng)畫效果，比如視差滾動(dòng)效果，只有JavaScript能夠完成

缺點(diǎn)：JavaScript在瀏覽器的主線程中運(yùn)行，而其中還有很多其他需要運(yùn)行的JavaScript、樣式計(jì)算、布局、繪制等對(duì)其干擾。這也就導(dǎo)致了線程可能出現(xiàn)阻塞，從而造成丟幀的情況。

CSS動(dòng)畫

優(yōu)點(diǎn)：瀏覽器可以對(duì)動(dòng)畫進(jìn)行優(yōu)化。它必要時(shí)可以創(chuàng)建圖層，然后在主線程之外運(yùn)行。

缺點(diǎn)：缺乏強(qiáng)大的控制能力。而且很難以有意義的方式結(jié)合到一起，使得動(dòng)畫變得復(fù)雜且易于出問題。