我們經常面臨一個抉擇：到底使用JavaScript還是CSS動畫，下面做一下對比
JS動畫
缺點：(1)JavaScript在瀏覽器的主執行緒中執行，而主執行緒中還有其它需要執行的JavaScript指令碼、樣式計算、佈局、繪製任務等,對其干擾導致執行緒可能出現阻塞，從而造成丟幀的情況。
(2)程式碼的複雜度高於CSS動畫
優點：(1)JavaScript動畫控制能力很強, 可以在動畫播放過程中對動畫進行控制：開始、暫停、回放、終止、取消都是可以做到的。
(2)動畫效果比css3動畫豐富,有些動畫效果，比如曲線運動,衝擊閃爍,視差滾動效果，只有JavaScript動畫才能完成
(3)CSS3有相容性問題，而JS大多時候沒有相容性問題
CSS動畫
缺點：
(1)執行過程控制較弱,無法附加事件繫結回撥函式。CSS動畫只能暫停,不能在動畫中尋找一個特定的時間點，不能在半路反轉動畫，不能變換時間尺度，不能在特定的位置新增回撥函式或是繫結回放事件,無進度報告
(2)程式碼冗長。想用 CSS 實現稍微複雜一點動畫,最後CSS程式碼都會變得非常笨重。
優點： (1)瀏覽器可以對動畫進行優化。
- 瀏覽器使用與 requestAnimationFrame 類似的機制，requestAnimationFrame比起setTimeout，setInterval設定動畫的優勢主要是:1)requestAnimationFrame 會把每一幀中的所有DOM操作集中起來，在一次重繪或迴流中就完成,並且重繪或迴流的時間間隔緊緊跟隨瀏覽器的重新整理頻率,一般來說,這個頻率為每秒60幀。2)在隱藏或不可見的元素中requestAnimationFrame不會進行重繪或迴流，這當然就意味著更少的的cpu，gpu和記憶體使用量。
- 強制使用硬體加速 （通過 GPU 來提高動畫效能）
CSS動畫流暢的原因
渲染執行緒分為main thread(主執行緒)和compositor thread(合成器執行緒)。
如果CSS動畫只是改變transform和opacity，這時整個CSS動畫得以在compositor thread完成（而JS動畫則會在main thread執行，然後觸發compositor進行下一步操作）
在JS執行一些昂貴的任務時，main thread繁忙，CSS動畫由於使用了compositor thread可以保持流暢，
在主執行緒中，維護了一棵Layer樹（LayerTreeHost），管理了TiledLayer，在compositor thread，維護了同樣一顆LayerTreeHostImpl，管理了LayerImpl，這兩棵樹的內容是拷貝關係。因此可以彼此不干擾，當Javascript在main thread操作LayerTreeHost的同時，compositor thread可以用LayerTreeHostImpl做渲染。當Javascript繁忙導致主執行緒卡住時，合成到螢幕的過程也是流暢的。
為了實現防假死，滑鼠鍵盤訊息會被首先分發到compositor thread，然後再到main thread。這樣，當main thread繁忙時，compositor thread還是能夠響應一部分訊息，例如，滑鼠滾動時，加入main thread繁忙，compositor thread也會處理滾動訊息，滾動已經被提交的頁面部分（未被提交的部分將被刷白）。
CSS動畫比JS流暢的前提：
- JS在執行一些昂貴的任務
- 同時CSS動畫不觸發layout或paint
在CSS動畫或JS動畫觸發了paint或layout時，需要main thread進行Layer樹的重計算，這時CSS動畫或JS動畫都會阻塞後續操作。
只有如下屬性的修改才符合“僅觸發Composite，不觸發layout或paint”：
- backface-visibility
- opacity
- perspective
- perspective-origin
- transfrom
所以只有用上了3D加速或修改opacity時，css3動畫的優勢才會體現出來。
(2)程式碼相對簡單,效能調優方向固定
(3)對於幀速表現不好的低版本瀏覽器，CSS3可以做到自然降級，而JS則需要撰寫額外程式碼
結論
如果動畫只是簡單的狀態切換，不需要中間過程控制，在這種情況下，css動畫是優選方案。它可以讓你將動畫邏輯放在樣式檔案裡面，而不會讓你的頁面充斥 Javascript 庫。然而如果你在設計很複雜的富客戶端介面或者在開發一個有著複雜UI狀態的 APP。那麼你應該使用js動畫，這樣你的動畫可以保持高效，並且你的工作流也更可控。所以，在實現一些小的互動動效的時候，就多考慮考慮CSS動畫。對於一些複雜控制的動畫，使用javascript比較可靠。