建站
咨詢(xún)
售后
建站咨詢(xún)
新聞中心
小編給大家分享一下CSS3動(dòng)畫(huà)和js動(dòng)畫(huà)的區(qū)別是什么，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！
專(zhuān)業(yè)從事成都網(wǎng)站制作、網(wǎng)站建設(shè),高端網(wǎng)站制作設(shè)計(jì),微信小程序,網(wǎng)站推廣的成都做網(wǎng)站的公司。優(yōu)秀技術(shù)團(tuán)隊(duì)竭力真誠(chéng)服務(wù)，采用H5場(chǎng)景定制+CSS3前端渲染技術(shù)，成都響應(yīng)式網(wǎng)站建設(shè)公司，讓網(wǎng)站在手機(jī)、平板、PC、微信下都能呈現(xiàn)。建站過(guò)程建立專(zhuān)項(xiàng)小組，與您實(shí)時(shí)在線(xiàn)互動(dòng)，隨時(shí)提供解決方案，暢聊想法和感受。
css實(shí)現(xiàn)動(dòng)畫(huà)：animation transition transform
js實(shí)現(xiàn)動(dòng)畫(huà)： setInterval setTimeout requestAnimationFrame
css動(dòng)畫(huà)：
優(yōu)點(diǎn)：
1.集中所有DOM，一次重繪重排，刷新頻率和瀏覽器刷新頻率相同。
2.代碼簡(jiǎn)單，方便調(diào)優(yōu)
3.不可見(jiàn)元素不參與重排，節(jié)約cpu
4.可以使用硬件加速GPU（translateZ（0））
缺點(diǎn)：
1.對(duì)過(guò)程無(wú)法把控。無(wú)進(jìn)度報(bào)告，無(wú)回調(diào)函數(shù)。
2.代碼冗長(zhǎng)。
JS動(dòng)畫(huà)：
優(yōu)點(diǎn)：
1.效果炫酷。
2.過(guò)程控制。
缺點(diǎn)：
1.無(wú)法保證執(zhí)行時(shí)間。timeout interval存在同步任務(wù)優(yōu)先執(zhí)行的問(wèn)題。
2.最小粒度無(wú)法保證在16ms.
requestAnimationFrame的優(yōu)點(diǎn)在于：
1.是瀏覽器針對(duì)動(dòng)畫(huà)提出的API。自動(dòng)優(yōu)化，頁(yè)面不激活狀態(tài)自動(dòng)停止。
2.集中所有dom，一次重繪就完成，重繪事件跟隨瀏覽器刷新頻率。
3.隱藏或不可見(jiàn)元素，不進(jìn)行重繪回流
以上是“CSS3動(dòng)畫(huà)和js動(dòng)畫(huà)的區(qū)別是什么”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對(duì)大家有所幫助，如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！
當(dāng)前文章：CSS3動(dòng)畫(huà)和js動(dòng)畫(huà)的區(qū)別是什么
網(wǎng)址分享：http://fisionsoft.com.cn/article/gecidg.html
