css3动画和jquery动画有什么区别

WBOY
Freigeben: 2022-04-28 15:35:14
Original
1933 Leute haben es durchsucht

css3动画和jquery动画的区别:1、css3可以设置3d动画,jquery不能实现3d动画;2、css的2d矩阵动画效率较高,其他属性动画效率低,jquery利用margin和left、top模拟的矩阵动画效率低,其他属性动画效率高。

css3动画和jquery动画有什么区别

本教程操作环境:windows10系统、CSS3&&jquery3.2.1版本、Dell G3电脑。

css3动画和jquery动画有什么区别

关于css3动画和jquery的动画的优劣对比:

CSS3动画提供了2D和3D以及常规动画属性接口,它可以工作在页面的任何一个元素的任意一个属性, CSS3的动画 是利用C语言编写的,它是系统层面的动画,因此它的效率绝对的高于js模拟的动画,真的就是这样吗?

经过我们的测试发现CSS3动画与javascript模拟动画有以下区别:

1、CSS 3D动画在js中无法实现;

CSS3的3D动画是CSS3中非常强大的功能,因为它的工作原理是在一个三维的空间里,因此js是无法模拟出像CSS3那样的3D动画,当然这个3D动画的实际应用场景是否很广,值得思考……

2、CSS 2D矩阵动画效率高于js利用margin和left,top模拟的矩阵动画;

CSS3的2D动画是指是2D矩阵Transform变化,比如缩放\变形\x轴\y轴,js当然是不能做变形动画的。就拿坐标动画来说,经过我们的测试发现使用CSS3的transform做translateXY动画比js中的position

left,position right快了近700mm!而且视觉上也比js动画流畅很多。

CSS3其它常规动画属性的效率均低于js模拟的动画;

常规动画属性在这里是指:height,width,opacity,border-width,color…..

我们曾在Android HTC中测试将一个DOM元素从height:0改变为height:100,我们使用了jQuery

animate和CSS3的transition以及animation,结果表明:CSS3的tansition和animation均慢于jQuery

animate 500mm!其它的常规动画属性均慢于jQuery animate 400-500mm!。

(学习视频分享:css视频教程

Das obige ist der detaillierte Inhalt voncss3动画和jquery动画有什么区别. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Empfehlungen
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage
Über uns Haftungsausschluss Sitemap
Chinesische PHP-Website:Online-PHP-Schulung für das Gemeinwohl,Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln!