• 技术文章 >web前端 >前端问答

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

    长期闲置长期闲置2022-04-28 15:35:14原创140

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

    本教程操作环境: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视频教程

    以上就是css3动画和jquery动画有什么区别的详细内容,更多请关注php中文网其它相关文章!

    声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn核实处理。
    专题推荐:jquery CSS3
    上一篇:jquery怎么修改title值 下一篇:css3支持哪些浏览器内核
    Web大前端开发直播班

    相关文章推荐

    • css3怎么实现鼠标隐藏效果• css3选择器怎么选第几个• css中伪类及伪对象是什么意思• css中nth的用法是什么• css3中select的用法是什么
    1/1

    PHP中文网