css3動畫和js動畫的差別是什麼

區別：1、js動畫的控制能力比css3動畫強；2、js動畫的效果比css3動畫豐富；3、js動畫大多數情況下沒有兼容性問題，而css3動畫有兼容性問題；4、js動畫的複雜度高於css3動畫。

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

JS動畫

優點：

• js動畫控制能力強，可以在動畫博凡過程中對動畫進行精細控制，開始、暫停、終止、取消都是可以做到的

• 動畫效果比css3動畫豐富，例如曲線運動，衝擊閃爍，視差滾動效果，只有js動畫才能完成

• js動畫大多數情況下沒有相容性問題，而css3動畫有相容性問題

#缺點

• js動畫的複雜度高於css3

  js在動畫瀏覽器的主執行緒中執行，而主執行緒還有其他javaScript腳本，樣式計算、佈局、繪製任務等，對其乾擾可能出現阻塞從而出現丟幀的情況
  

js動畫往往需要頻繁操作DOM的css屬性來實現視覺上的動畫效果，這個時候瀏覽器要不停地執行重繪和重排，這對於效能的消耗是很大的，尤其是在分配給瀏覽器的記憶體沒那麼寬裕的行動端。

CSS3動畫

優點：

• 1、部分情況下瀏覽器可以對動畫進行最佳化，為什麼說部分情況呢，因為是有條件的：

• 在Chromium基礎上的瀏覽器中

#同時CSS動畫不觸發layout或paint，在CSS動畫或JS動畫觸發了paint或layout時，需要main thread進行Layer樹的重新計算，這時CSS動畫或JS動畫都會阻塞後續操作。

在主線程中，維護了一棵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也會處理滾動訊息，滾動已經被提交的頁面部分（未被提交的部分將被刷白）。
• • 2、部分效果可以強制使用硬體加速（透過GPU 來提高動畫效能）
  • 缺點
  • 運行進程控制較弱，css3動畫只能在某些場景下控制動畫的暫停與繼續，不能在特定的位置添加添加回調函數
  代碼冗長。想用 CSS 實作稍微複雜一點動畫,最後CSS程式碼都會變得非常笨重。
• css動畫比js動畫流暢的前提

#js在執行一些複雜的任務css動畫比較少或不觸發pain和layout，即重繪和重排，例如透過改變如下屬性產生的css動畫

backface-visibility

opacityperspective （設定元素視圖） perspective-origin

###transfrom############部分屬性能夠啟動3D加速和GPU硬體加速，例如使用transform的translateZ進行3D變換時##### #在Chromium基礎上的瀏覽器中，這個似乎是核心做了最佳化，當css動畫知識改變transfrom和opacity時，整個CSS動畫得以在compositor thread完成（而JS動畫則會在main thread執行),這樣css動畫渲染不會影響主線程。 ############總結#########回歸到日常開發中，當有一個動畫的需求時，首要考慮的肯定是能不能盡可能實現的問題。如果在CSS動畫和JS動畫都能實現的基礎上才會要去根據上面總結的權衡哪個性能更好的問題。總之，不一定css動畫就比js動畫好，還要看具體的需求和業務場景。 ######學習影片分享：###css影片教學###、###javascript學習教學#######

以上是css3動畫和js動畫的差別是什麼的詳細內容。更多資訊請關注PHP中文網其他相關文章！