css3動畫和javascript動畫相比誰更快

2021-03-04 01:48:34 字數 3526 閱讀 5025

1樓:

css動畫和js動畫主要的不同點是

功能涵蓋面,js比css3大

定義動畫過程的@keyframes不支援遞迴定義,如果有多種類似的動畫過程,需要調節多個引數來生成的話,將會有很大的冗餘(比如jquery mobile的動畫方案),而js則天然可以以一套函式實現多個不同的動畫過程

時間尺度上,@keyframes的動畫粒度粗,而js的動畫粒度控制可以很細

css3動畫裡被支援的時間函式非常少,不夠靈活

以現有的介面,css3動畫無法做到支援兩個以上的狀態轉化

實現/重構難度不一,css3比js更簡單,效能調優方向固定

對於幀速表現不好的低版本瀏覽器,css3可以做到自然降級,而js則需要撰寫額外**

css動畫有天然事件支援(transitionend、animationend,但是它們都需要針對瀏覽器加字首),js則需要自己寫事件

css3有相容性問題,而js大多時候沒有相容性問題。

css3動畫和javascript動畫相比誰更快

2樓:輕顰淺笑灬

css動畫和js動畫主要的不同點是

功能涵蓋面,js比css3大

定義動畫過程的@keyframes不支援遞迴定義,如果有多種類似的動畫過程,需要調節多個引數來生成的話,將會有很大的冗餘(比如jquery mobile的動畫方案),而js則天然可以以一套函式實現多個不同的動畫過程

時間尺度上,@keyframes的動畫粒度粗,而js的動畫粒度控制可以很細

css3動畫裡被支援的時間函式非常少,不夠靈活

以現有的介面,css3動畫無法做到支援兩個以上的狀態轉化

實現/重構難度不一,css3比js更簡單,效能調優方向固定

對於幀速表現不好的低版本瀏覽器,css3可以做到自然降級,而js則需要撰寫額外**

css動畫有天然事件支援(transitionend、animationend,但是它們都需要針對瀏覽器加字首),js則需要自己寫事件

css3有相容性問題,而js大多時候沒有相容性問題。

3樓:匿名使用者

javascript和jquery是錯誤地混為一談。javascript動畫是快速的。jquery是慢下來。

為什麼呢?因為儘管jquery是非常強大的-它從未jquery的設計目標是一個高效能的動畫引擎:

jquery是無法避免的 layout thrashing由於它的**庫,多用在動畫。

jquery的記憶體消耗經常觸發垃圾收集暫時凍結的動畫。

jquery使用setinterval代替requestanimationframe(raf)為為了保護自己的新手。

請注意,layout thrashing是什麼原因導致緩慢的開始動畫,垃圾收集是什麼導致口吃的原因在動畫,和raf的缺失是什麼通常產生較低的幀速率。

css 和 js 動畫哪個更快

4樓:貼了一粑粑

理論上來說應該是css更快一點,但是css同樣有它的問題,那就是瀏覽器支援的情況。由於動畫是在css3才引入的,所以不支援css3的老式瀏覽器就不能完成動畫,這裡一般指的是ie9以前的瀏覽器。如果想相容ie的老版本的話,還得要用js來實現。

此外,js能夠實現的動畫更加豐富,css能夠實現比較簡單的動畫。

5樓:

一樣,動畫是一些底層**實現的,而flush動畫更是一個控制元件在實現功能,你的css或js只是描述性質的指令碼,不涉及實際的圖形渲染演算法,並不會影響圖形渲染速度,除非你的**很糟糕,有過多並不合理的東西存在,主要還是取決於瀏覽器,cpu顯示卡效能這些。。。

css 和 js 動畫哪個會更快

6樓:千鋒教育

理論上來說應該是css更快一點,但是css同樣有它的問題,那就是瀏覽器支援的情況。由於動畫是在css3才引入的,所以不支援css3的老式瀏覽器就不能完成動畫,這裡一般指的是ie9以前的瀏覽器。如果想相容ie的老版本的話,還得要用js來實現。

此外,js能夠實現的動畫更加豐富,css能夠實現比較簡單的動畫。

7樓:無可奈何

當然是hicss3的動畫快,以為js的動畫都是要靠操作dom的比較耗費資源

css3和javascript誰實現動畫變化比較好

8樓:匿名使用者

jquery呀, 有自定義動畫的函式, 直接呼叫就可以了, 具體實現的話, 感覺js會強大的多

9樓:匿名使用者

css3是瀏覽器原生自帶的方法,不管是流暢度 還是渲染方式都比js的方法更快更好。

當然還有個canvas動畫,這個基本可以替代flash的動畫,但是這個就是js來實現的了。

一般的一些移動啊 旋轉啊 淡入淡出 啊 縮放啊什麼的 肯定是css3更好,快、流暢、效率高

10樓:匿名使用者

不考慮相容問題, 我覺得還是css3好

11樓:匿名使用者

肯定是javascript css3好多瀏覽器不相容

12樓:紫氣扶搖

考慮到相容性,現在還是js的比較多。

css3動畫和js動畫各有什麼優劣

13樓:匿名使用者

css3的動畫的優點:

1.在效能上會稍微好一些,瀏覽器會對css3的動畫做一些優化(比如專門新建一個圖層用來跑動畫)

2.**相對簡單

但其缺點也很明顯:

1.在動畫控制上不夠靈活

2.相容性不好

3.部分動畫功能無法實現(如滾動動畫,視差滾動等)javascript的動畫正好彌補了這兩個缺點,控制能力很強,可以單幀的控制、變換,同時寫得好完全可以相容ie6,並且功能強大。但想想css動畫的transform矩陣是c++級的計算,必然要比javascript級的計算要快。

另外對庫的依賴也是一個很讓人頭疼的問題。

所以,對於一些複雜控制的動畫,使用javascript會比較靠譜。而在實現一些小的互動動效的時候,就多考慮考慮css吧。

js動畫和css3動畫,學習時應著重學習哪個

14樓:影子丶

當然是都要學好啦,不過工作中用的多的是js

瀏覽器中動畫渲染效率原生js高還是css高?

15樓:匿名使用者

css的執行順序是優先於js的,

css一旦被引入,立即存到瀏覽器記憶體中,

動畫的話,當然是css高

css動畫與js動畫的差異?

16樓:三人行慕課

1. js動畫**相對複雜一些

2. 動畫執行時,對動畫的控制程度上,js能夠讓動畫暫停、取消、終止,css動畫不能新增事件

3.動畫效能看,js動畫多了一個js解析的過程,效能不如css動畫好

css3中 webkit perspective如何理解

這是實際上指的是成像畫布距離div的距離,你可以把成像畫布想象成地面,有一個div站在地面上150米距離 就是這個屬性設定150的意思,不過單位不是米 然後太陽把div的影子投在地面上。離地面遠和近,都會使影子在地面上的大小形狀不一樣。這個影子,就是最終你在電腦螢幕上看見的。這個屬性沒有上下限。將平...

css3中mozmswebkit各什麼意思

1 moz代表firefox瀏覽器私有屬性2 ms代表ie瀏覽器私有屬性 3 webkit代表safari chrome私有屬性這些是為了相容老版本的寫法,比較新版本的瀏覽器都支援直接寫 border radius。現在比較流行的一個概念就是 不太關鍵的樣式,可以不考慮相容,比如你說的圓角,並不影響...

請問css3中的transition實現過度動畫

css中動畫功能分為復transition和animation兩種制,這個兩種方法都可以bai通過改變ducss中的屬性值來產生動畫效果 zhitransition 只能實現兩個簡dao單值之間的過渡 animation 通過引用keyframes關鍵幀來實現複雜動畫。by三人行慕課 過渡的特點 過...