css3動畫和jquery動畫有什麼差別

css3動畫和jquery動畫的差別：1、css3可以設定3d動畫，jquery無法實現3d動畫；2、css的2d矩陣動畫效率較高，其他屬性動畫效率低，jquery利用margin和left 、top模擬的矩陣動畫效率低，其他屬性動畫效率高。

本教學操作環境：windows10系統、CSS3&&jquery3.2.1版本、Dell G3電腦。

css3動畫和jquery動畫有什麼區別

關於css3動畫和jquery的動畫的優劣對比：

CSS3動畫提供了2D和3D以及常規動畫屬性接口，它可以工作在頁面的任何一個元素的任意一個屬性， CSS3的動畫 是利用C語言編寫的，它是系統層面的動畫，因此它的效率絕對的高於js模擬的動畫，真的就是這樣嗎？

經過我們的測試發現CSS3動畫與javascript模擬動畫有以下區別：

1、CSS 3D動畫在js中無法實現；

CSS3的3D動畫是CSS3中非常強大的功能，因為它的工作原理是在一個三維的空間裡，因此js是無法模擬出像CSS3那樣的3D動畫，當然這個3D動畫的實際應用場景是否很廣，值得思考…

2、CSS 2D矩陣動畫效率高於js利用margin和left,top模擬的矩陣動畫；

##CSS3的2D動畫是指是2D矩陣Transform變化，例如縮放＼變形＼x軸＼y軸，js當然是不能做變形動畫的。就拿座標動畫來說，經過我們的測試發現使用CSS3的transform做translateXY動畫比js中的position

left，position right快了近700mm!而且視覺上也比js動畫流暢很多。

CSS3其它常規動畫屬性的效率都低於js模擬的動畫;

常規動畫屬性在這裡是指：height，width,opacity,border-width ,color…..

我們曾在Android HTC中測試將一個DOM元素從height:0改為height:100，我們使用了jQuery

animate和CSS3的transition以及animation，結果顯示：CSS3的tansition和animation皆慢於jQuery

animate 500mm！其它的常規動畫屬性均慢於jQuery animate 400-500mm!。

（學習影片分享：

css影片教學）

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