在建設(shè)網(wǎng)站中動(dòng)畫效果分為CSS動(dòng)畫和JS動(dòng)畫，但這兩種動(dòng)畫到底有什么區(qū)別呢。首先它們的實(shí)現(xiàn)原理是不一樣的，CSS動(dòng)畫是通過關(guān)鍵幀來(lái)實(shí)現(xiàn)的，著意味著CSS動(dòng)畫更重注于樣式和視覺效果的變化。而JS動(dòng)畫是通過JS代碼來(lái)操作元素屬性來(lái)實(shí)現(xiàn)的，它提供了更加靈活的控制元素的行為和屬性。

CSS動(dòng)畫可以通過CSS屬性來(lái)實(shí)現(xiàn)動(dòng)畫效果，不需要編寫JS代碼，而且使用硬件加速可以更流暢的完成動(dòng)畫效果，有著很好的兼容性，大部分的瀏覽器都支持CSS動(dòng)畫。當(dāng)然CSS的功能有限只能完成一些簡(jiǎn)單的屬性動(dòng)畫，不能進(jìn)行復(fù)雜的邏輯控制，同時(shí)大部分動(dòng)畫都只能加載一次，雖然可以設(shè)置無(wú)限次加載，但是不能進(jìn)行和用戶進(jìn)行交互。

JS動(dòng)畫可以通過編寫復(fù)雜的JS代碼來(lái)實(shí)現(xiàn)復(fù)雜的動(dòng)畫效果，來(lái)隨時(shí)控制元素的移動(dòng)變化，還可以和用戶交互例如拖動(dòng)點(diǎn)擊等效果。但是要編寫復(fù)雜的JS代碼，同時(shí)過于復(fù)雜的動(dòng)畫可能會(huì)造成瀏覽器的卡頓。

所以像一些例如縮放，位移，旋轉(zhuǎn)等都可以使用CSS來(lái)實(shí)現(xiàn)：而像路徑動(dòng)畫，物理動(dòng)畫等復(fù)雜的效果還是得使用JS來(lái)實(shí)現(xiàn)。不過現(xiàn)在普通的網(wǎng)站動(dòng)畫效果基本上都用不到JS，同時(shí)CSS動(dòng)畫會(huì)使用硬件加速來(lái)優(yōu)化性能，JS動(dòng)畫會(huì)受到JS引擎的影響，有時(shí)CSS動(dòng)畫會(huì)更加流暢。一些看似復(fù)雜的效果也可以通過CSS動(dòng)畫和JS的交互來(lái)實(shí)現(xiàn)。

一般來(lái)說CSS動(dòng)畫能完成的JS也能完成，CSS完成不了的JS也能完成，只是JS書寫起來(lái)比較麻煩，而且有可能會(huì)出現(xiàn)性能上的問題，在開發(fā)過程中要根據(jù)實(shí)際情況來(lái)確定動(dòng)畫的復(fù)雜程度和使用的動(dòng)畫方法，能用CSS完成的基本不會(huì)使用JS來(lái)做，哪怕是交互動(dòng)畫一般簡(jiǎn)單的都會(huì)使用JS的交互配合CSS的動(dòng)畫來(lái)實(shí)現(xiàn)，不會(huì)全部使用JS的動(dòng)畫。