css3动画与js动画

比较

兼容性

css3

兼容性不好,IE10才开始支持。

js

兼容性好,甚至可以兼容IE6。

性能

css3

在性能上会稍微好一些,浏览器会对CSS3的动画做一些优化(新建图层来跑动画)。
移动端的开发也有这种hack,开启硬件加速,来解决可能的卡顿问题:

css-webkit-transform: translate3d(0, 0, 0);
js

在现代浏览器中性能的差异可以忽略,但是对于帧速表现不好的低版本浏览器,CSS3可以做到自然降级,而JS则需要撰写额外代码。

复杂度

css3

代码相对简单,但是也意味着在动画的控制上不够灵活。部分动画效果不能实现。CSS动画有天然事件支持(TransitionEnd、AnimationEnd)。

js

代码复杂,需要自己写事件,通常需要引入库来减少工作量。粒度控制很细,可以单帧的控制、变换,写出复杂的动画。

结论

在有兼容性要求或者有复杂控制的动画的情况下可以使用js动画,其他情况就使用css3动画。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 175,055评论 25 709
  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 14,680评论 1 92
  • 平淡如水 偶有涟漪 不曾期待 何来失望 心之所愿 一切如常 不悲不喜 莫失莫忘
    李木只阅读 3,424评论 0 4
  • 曾经写过一篇文章,大概是因为引起了很多人的共鸣,受到了一些好评。于是陆续的开始有不同的自媒体,营销号,企业号或者其...
    张作作阅读 11,228评论 14 48
  • 12天。距离16年结束还有12天。今天要说的是前段时间看到一个网文作者在知乎的留言。是谁他一周可以写36万字。然后...
    黑兔子Gary阅读 916评论 1 0