美文网首页
CSS3动画与JS动画比较

CSS3动画与JS动画比较

作者: Shiyouzhang | 来源:发表于2021-04-12 09:08 被阅读0次

优点

css3

  1. CSS3动画在性能上会稍微好一些,浏览器会对CSS3的动画做一些优化(比如专门新建一个图层用来跑动画)
  2. 代码相对简单

js

  1. 控制能力强,可以单帧的控制和变换。
  2. 写的好,写的好的话,完全可以兼容IE6

缺点

css3

  1. 在动画控制上不够灵活
  2. 兼容性不好
  3. 部分动画功能无法实现(如滚动动画,视差滚动等)

js

  1. S运算预渲染性能不如CSS3动画,因为CSS动画的transform矩阵,是C++级的,必然要比JavaScript级的计算要快
  2. 还有就是对库比较依赖,编码较为繁琐

总结

综上所述我在写动画的时候能选择css3的时候就坚决不去选择js;原因如下
1、css3不占用JS主线
2、可以利用硬件加速;
3、 浏览器可css3对动画做优化

相关文章

  • CSS3动画与JS动画比较

    优点 css3 CSS3动画在性能上会稍微好一些,浏览器会对CSS3的动画做一些优化(比如专门新建一个图层用来跑动...

  • 复习

    动画历史回顾:gif动画->flash动画->js动画->css3动画 过渡动画(即补间动画):用于实现两种状态的...

  • 2018-11-27第九天总结

    一、 动画网页动画可以通过以下几种方式实现(gif、flash 除外),css3 动画SVG 动画JS 动画(包括...

  • 2019-01-02 css3过渡动画 css3圆角阴影透明度

    一、 动画网页动画可以通过以下几种方式实现(gif、flash 除外),css3 动画SVG 动画JS 动画(包括...

  • JS与CSS3动画比较

    JS动画 缺点:JavaScript在浏览器的主线程中运行,而其中还有很多其他需要运行的JavaScript、样式...

  • AnimationEnd 事件侦听

    CSS3 动画结束时是有触发事件的,这个之前竟然不了解。。除了JS动画如果做纯css3动画的时候使用 delay ...

  • css3动画使用GPU加速

    CSS3实现动画,可以实现不使用js,避免使用js主线程,阻塞主线程,下面我们看个很基本的动画 这个基本的动画,但...

  • css3动画与js动画

    比较 兼容性 css3 兼容性不好,IE10才开始支持。 js 兼容性好,甚至可以兼容IE6。 性能 css3 在...

  • 2017-06-18

    css3中变形与动画(上) 1.Animation 动画定义animation动画2.Animation动画播放 ...

  • css3动画和js动画的比较

    css实现动画:animation transition transformjs实现动画: setInterval...

网友评论

      本文标题:CSS3动画与JS动画比较

      本文链接:https://www.haomeiwen.com/subject/trrikltx.html