使用Javascript或CSS3制作動畫？

Question

我一直想知道在性能方面對動畫有什么好處 - Javascript或CSS3。 在這個頁面上，您可以在GSAP，jQuery和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（或其他類似的框架）更快嗎？

Answer 1

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

• CSS3：“請盡可能順利地過渡到這一點。”

• JavaScript（天真）：“好的，所以首先你搬到這里 ，然后你搬到這里 ，然后在這里 ......你跟上了嗎？” [瀏覽器：]“讓你心煩意亂！”

• JavaScript（delta計時）：“好的，搬到這里 。該死的，你很慢。好吧，搬到這里看看你好像沒有落后。”

• jQuery：“我不在乎它是怎么做的，只要這樣做。再見！”

在我看來，獲勝者是CSS3。

Answer 2

CSS3動畫比JavaScript動畫更快更流暢，因為它們可以通過瀏覽器/ GPU進行優化並可能加速硬件加速。 另一方面，JS動畫通常不太流暢，因為動畫的每個幀都必須被顯式解釋為渲染。

此外，JS動畫主要用於不支持CSS3的舊版瀏覽器，后者相對較新。

Answer 3

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

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

但不久之后，像GSAP和jQuery這樣的庫（無論如何）都會改變他們的動畫方法。 他們甚至可以選擇更快的方法，具體取決於運行站點的設備。

（例如：您已經可以使用jQuery的轉接插件來使用jQuery的CSS3動畫.http ：//ricostacruz.com/jquery.transit/ ）

所以：

CSS3會比Javascript更快嗎？

是。 但：

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

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

如果你使用不透明度動畫一個小懸停效果：CSS3是你的方式。 簡單，干凈，快速。

對於復雜的動畫，不同的交互等，您將需要使用JS，這也為您提供了以后選擇動畫方法的靈活性。 特別是GSAP非常強大且易於編寫。