使用Javascript或CSS3動畫？

我一直想知道在動畫性能方面什麼更好 - Javascript或CSS3。在這個頁面你有GSAP，jQuery和CSS3之間的對比：使用Javascript或CSS3動畫？

http://css-tricks.com/myth-busting-css-animations-vs-javascript/

向下滾動到性能的比較。現在我的問題如下：

CSS3遲早會比Javascript（GSAP在這種情況下）更快？那麼我們應該使用CSS3還是使用Javascript編程動畫？

更新：另一個網站：

http://greensock.com/transitions/

，因爲它看起來現在，GSAP是在很多方面比CSS3快，但在3D轉換CSS3更快。

現在的問題仍然是：CSS3會比GSAP（或其他類似的框架）更快嗎？

來源

2014-09-24 Frederik Witte

顯然CSS的速度總是比js快，因爲CSS是一個瀏覽器內置庫，但是如果你想跨瀏覽器支持，那麼js是要走的路了 – 2014-09-24 07:19:32

看看我發佈的頁面。他測試了GSAP vs CSS3，此時它比CSS3快3倍。 – 2014-09-24 07:34:02

直到現在我還不知道GSAP是什麼，聽起來很棒！ <3 – 2014-09-24 07:50:38

這裏的動畫是如何工作的一個近似值：

CSS3：「請爲平穩過渡這一儘可能合理地」
的JavaScript（天真）：「好吧，你首先移動這裏，那麼您將在這裏，然後這裏 ...你跟得上？」 [瀏覽器：]「打造你的想法！」
的JavaScript（增量時間）：「好吧，移動這裏哎呀，你慢好了，搬過來這裏所以看起來你不落後。」
jQuery：「我不在乎它是如何完成的，只是做到了，再見！

在我看來，獲勝者是CSS3。

來源

2014-09-24 07:17:21

這就是說，當你需要爲呈現給畫布的東西（WebGL）設置動畫時，你可能會訴諸JavaScript /增量時間。 – MJB 2014-09-24 07:22:44

@DatProgram非常真實。這是我寫的這份清單中的第二好。由於您無法在畫布元素上使用CSS，因此它首先變爲第一。 – 2014-09-24 07:23:22

不要被愚弄CSS3動畫是完全不同的算法。它們具有本地代碼的優點，並且可能不受JS引擎的單線程限制，但它們很可能使用相同類型的幀計算邏輯（這沒什麼不妥）。對於基於JS的動畫來說，真正的挑戰在於他們必須與JavaScript中的所有其他事物共享時間和執行（因爲是單線程），所以它們並不總能夠在他們想要的時候執行。 – jfriend00 2014-09-24 07:23:26

CSS3動畫比JavaScript動畫更快，更平滑，因爲它們可以被優化，並可能被瀏覽器/ GPU硬件加速。另一方面，JS動畫通常不那麼流暢，因爲動畫的每一幀必須被明確地解釋爲渲染。

另外，JS動畫主要用於不支持CSS3的較舊的瀏覽器，這是相對較新的。

來源

2014-09-24 07:19:02 krisdyson

這是一個更清晰，技術性的答案。謝謝！ – rnevius 2014-09-24 07:20:02

CSS3移動版！ – Paul 2014-09-24 07:29:07

你可以看看我發佈的頁面嗎？他對它進行了測試，目前GSAP動畫比CSS3動畫快3倍。或者你有你的聲明來源？ – 2014-09-24 07:32:36

似乎只有四個 css屬性獲得真正的硬件加速，Paul Lewis和Paul Irish在這裏解釋：http://www.html5rocks.com/en/tutorials/speed/high-performance-animations/（非常有趣的閱讀！）。這些是：位置，比例，旋轉和不透明度 所有其他CSS屬性在大多數瀏覽器中都沒有任何效果，因此可能會很慢。

所以是的，一些CSS動畫已經非常流暢，其餘的會更快。特別是在移動設備上。（更多技術的東西在其他答案）

但不久之後，GSAP和jQuery等（底層）將改變他們的動畫方法。他們甚至可以選擇速度更快的方法，具體取決於網站運行的設備。

（例如：你已經可以使用公交的jQuery插件使用CSS3動畫從jQuery的http://ricostacruz.com/jquery.transit/）

所以：

將CSS3是不是JavaScript更快？

是。但是：

我們應該使用CSS3編寫動畫還是使用Javascript？

這是一個不同的故事，取決於您的需求。

如果您使用不透明度製作一個小小的懸停效果動畫：CSS3是您前進的方式。簡單，乾淨，快速。

對於複雜的動畫，不同的交互等，您將需要使用JS，這也爲您以後選擇動畫方法提供了靈活性。特別是GSAP是荒謬的強大和易於編寫。

來源

2014-09-25 09:46:11 elpoto

使用Javascript或CSS3動畫？

回答

相關問題