CSS3動畫和js動畫的區(qū)別是什么

發(fā)布時間：2022-03-03 09:47:44 來源：億速云閱讀：112 作者：小新欄目：web開發(fā)

小編給大家分享一下CSS3動畫和js動畫的區(qū)別是什么，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

　　css實現(xiàn)動畫：animation transition transform

　　js實現(xiàn)動畫： setInterval setTimeout requestAnimationFrame

　　css動畫：

　　優(yōu)點：

　　1.集中所有DOM，一次重繪重排，刷新頻率和瀏覽器刷新頻率相同。

　　2.代碼簡單，方便調(diào)優(yōu)

　　3.不可見元素不參與重排，節(jié)約cpu

　　4.可以使用硬件加速GPU（translateZ（0））

　　缺點：

　　1.對過程無法把控。無進度報告，無回調(diào)函數(shù)。

　　2.代碼冗長。

　　JS動畫：

　　優(yōu)點：

　　1.效果炫酷。

　　2.過程控制。

　　缺點：

　　1.無法保證執(zhí)行時間。timeout interval存在同步任務(wù)優(yōu)先執(zhí)行的問題。

　　2.最小粒度無法保證在16ms.

　　requestAnimationFrame的優(yōu)點在于：

　　1.是瀏覽器針對動畫提出的API。自動優(yōu)化，頁面不激活狀態(tài)自動停止。

　　2.集中所有dom，一次重繪就完成，重繪事件跟隨瀏覽器刷新頻率。

　　3.隱藏或不可見元素，不進行重繪回流

以上是“CSS3動畫和js動畫的區(qū)別是什么”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對大家有所幫助，如果還想學(xué)習(xí)更多知識，歡迎關(guān)注億速云行業(yè)資訊頻道！

向AI問一下細(xì)節(jié)

猜你喜歡