js動畫和css動畫的區別有哪些

這篇文章將為大家詳細講解有關js動畫和css動畫的區別有哪些，小編覺得挺實用的，因此分享給大家做個參考，希望大家閱讀完這篇文章后可以有所收獲。

區別：1、js是逐幀動畫，每一幀都是由代碼控制，代碼復雜度高；而css是關鍵幀動畫，補間動畫部分由瀏覽器完成，代碼復雜度低。2、js的動畫執行在主線程，容易引發阻塞和等待；css的動畫執行在合成線程，專事專干，不阻塞主線程。

本教程操作環境：windows7系統、CSS3&&javascript1.8.5版、Dell G3電腦。

js動畫和css動畫的區別

區別一：

js是逐幀動畫，每一幀都是由代碼控制，操作不當，極易引發回流

css是關鍵幀動畫，補間動畫部分由瀏覽器完成，便于瀏覽器進行優化，動畫執行過程控制的更好

js動畫的代碼復雜度高于CSS動畫

區別二：

js的動畫執行在主線程，主線程還有其他任務要執行，容易引發阻塞和等待，降低動畫執行效率

css的動畫執行在合成線程，專事專干，不阻塞主線程，合成線程的動畫也不會觸發回流和重繪

CSS動畫

優點：

(1)瀏覽器可以對動畫進行優化。

(2)代碼相對簡單,性能調優方向固定

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

缺點：

1、 運行過程控制較弱,無法附加事件綁定回調函數。CSS動畫只能暫停,不能在動畫中尋找一個特定的時間點，不能在半路反轉動畫，不能變換時間尺度，不能在特定的位置添加回調函數或是綁定回放事件,無進度報告

2、  代碼冗長。想用 CSS 實現稍微復雜一點動畫,最后CSS代碼都會變得非常笨重。

JS動畫

優點：

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

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

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

缺點：

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

(2)代碼的復雜度高于CSS動畫

小結

如果動畫只是簡單的狀態切換，不需要中間過程控制，在這種情況下，css動畫是優選方案。

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

然而如果你在設計很復雜的富客戶端界面或者在開發一個有著復雜UI狀態的 APP。那么你應該使用js動畫，這樣你的動畫可以保持高效，并且你的工作流也更可控。

所以，在實現一些小的交互動效的時候，就多考慮考慮CSS動畫。對于一些復雜控制的動畫，使用javascript比較可靠。

關于“js動畫和css動畫的區別有哪些”這篇文章就分享到這里了，希望以上內容可以對大家有一定的幫助，使各位可以學到更多知識，如果覺得文章不錯，請把它分享出去讓更多的人看到。