美文网首页
JS动画和CSS3动画的比较

JS动画和CSS3动画的比较

作者: codeice | 来源:发表于2016-06-30 15:13 被阅读285次

我们经常面临一个抉择:是使用JavaScript的动画还是使用CSS的动画,下面将对比一下这两种方式

JS动画

优点:JavaScript的动画与CSS预先定义好的动画不同,可以在其动画过程中对其进行控制:开始、暂停、回放、中止、取消都是可以做到的。而且一些动画效果,比如视差滚动效果,只有JavaScript能够完成

缺点:JavaScript在浏览器的主线程中运行,而其中还有很多其他需要运行的JavaScript、样式计算、布局、绘制等对其干扰。这也就导致了线程可能出现阻塞,从而造成丢帧的情况。

CSS动画

优点:浏览器可以对动画进行优化。它必要时可以创建图层,然后在主线程之外运行。

缺点:缺乏强大的控制能力。而且很难以有意义的方式结合到一起,使得动画变得复杂且易于出问题。

相关文章

  • css3动画和js动画的比较

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

  • JS动画和CSS3动画的比较

    我们经常面临一个抉择:是使用JavaScript的动画还是使用CSS的动画,下面将对比一下这两种方式 JS动画 优...

  • 复习

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

  • 2018-11-27第九天总结

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

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

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

  • requestAnimationFrame

    动画 web开发中实现动画的方式有多种,CSS3中的transition和animation,js中的setInt...

  • AnimationEnd 事件侦听

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

  • CSS3动画与JS动画比较

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

  • 微信小程序Animation动画的使用

    1,前言 和css3动画不同,小程序中动画是主要是通过js控制的,简单来说就是创建一个动画实例animation。...

  • 08_dayCSS动画

    CSS3新增的功能有:过渡和动画,阴影和圆角 css3过渡动画: css3都有哪些新增的东西 : 过度,动画,阴影...

网友评论

      本文标题:JS动画和CSS3动画的比较

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