CSS動畫與JQuery動畫

Question

我幾乎總是使用JQuery動畫來處理任何Web項目，但我想知道CSS動畫是如何不同的。我知道語法不同（很明顯），但CSS動畫具有的一些功能是JQuery不具備的功能，反之亦然。每個的優缺點是什麼？是否有更好的功能？每種效率如何？

Answer 1

CSS3動畫性能與JavaScript的競爭力，但不一定優越。 此頁面允許您測試多種瀏覽器動畫技術並查看實際差異。

https://greensock.com/js/speed.html

CSS3動畫中不是JavaScript一個單獨的線程運行，因此它非常無阻塞。 所以CSS3是最好的，如果你的應用程序有一些負載。

http://www.phpied.com/css-animations-off-the-ui-thread/

CSS3動畫也往往硬件加速（動畫在GPU而不是CPU的性能提升運行）。但許多JavaScript動畫工具也是如此。

這基本上是技術上的。編碼風格明智，他們也有很大的不同。觸發CSS3動畫通常是通過添加和刪除JavaScript中的dom類。所以你的組件的行爲最終在2個文件和2種語言之間生存。這一切都可以解決，但它可以使代碼難以推理。

因此，如果您選擇使用CSS3動畫，我建議您不要在CSS中這樣做，而是使用可讓您將JavaScript動畫存儲在JavaScript中的JavaScript庫。或者你可以選擇一個只有JavaScript的動畫庫，比如GreenSock。無論哪種方式，我建議在JavaScript中存儲動畫以便工作流程和簡化理解。

Answer 2

我認爲主要的親是CSS動畫是本地的。這意味着他們將在瀏覽器中調用編譯後的代碼，並可能使用任何可用的硬件加速。這意味着CSS3動畫將會更快並且使用更少的內存。

下面是從Opera瀏覽器的開發者的主題有趣的訊息：https://dev.opera.com/articles/css3-vs-jquery-animations/