CSS3动画和js动画的区别是什么?各有什么优劣呢?-问答-阿里云开发者社区-阿里云

开发者社区> 问答> 正文

CSS3动画和js动画的区别是什么?各有什么优劣呢?

李栋 2014-08-26 15:35:28 12046
在msdnCSS动画页面有这样一句话:与传统的 JavaScript 驱动的动画实践比较,它可提供更好的呈现性能。
出自:http://msdn.microsoft.com/zh-cn/library/jj680076(v=vs.85).aspx
移动端的开发也有这种hack,来解决可能的卡顿问题:css-webkit-transform: translate3d(0, 0, 0);
出自:http://www.qianduan.net/high-performance-css3-animations.html
看了一些文章,介绍CSS3动画的会说道一些性能问题,但没有具体说清楚,这两种动画在开发中(包括移动端)如何取舍呢?
JavaScript 前端开发
分享到
取消 提交回答
全部回答(5)
  • dt来了
    2014-08-27 14:59:14
    ReCSS3动画和js动画的区别是什么?各有什么优劣呢?
    css3,?我只知道css
    0 0
  • 村里一把手
    2014-08-26 17:21:32
    移动端就别考虑了
    0 0
  • 何强
    2014-08-26 17:18:00
    ReCSS3动画和js动画的区别是什么?各有什么优劣呢?
    css3可以很便捷的实现一些动画效果,并且在支持css3的浏览器下表现不错,用js做动画的话,除非是在非常古老的浏览器(你懂的)下运行,一般也不会有卡顿问题,不过还是建议在支持css3的浏览器下使用css3去做动画。移动端的话,其实能用的效果真的不多,以前做过一个折叠效果,在安卓下完全不堪入目,IOS下也是勉强看到折了那么一下,但是pc上看就很顺畅,一般的滑动效果还是没有问题的,而且相当顺畅。
    总结下,工作中如果要兼容那些老古董的话,还是用js去写动画,如果只需要兼容现代浏览器的,尽量使用css3做动画,移动端就完全不要考虑js写动画了。
    0 0
  • 亿刀
    2014-08-26 16:32:54
    ReCSS3动画和js动画的区别是什么?各有什么优劣呢?
    CSS3的动画的优点:

    在性能上会稍微好一些,浏览器会对CSS3的动画做一些优化(比如专门新建一个图层用来跑动画)
    代码相对简单
    但其缺点也很明显:

    在动画控制上不够灵活
    兼容性不好
    部分动画功能无法实现(如滚动动画,视差滚动等)
    JavaScript的动画正好弥补了这两个缺点,控制能力很强,可以单帧的控制、变换,同时写得好完全可以兼容IE6,并且功能强大。但想想CSS动画的transform矩阵是C++级的计算,必然要比javascript级的计算要快。另外对库的依赖也是一个很让人头疼的问题。

    所以,对于一些复杂控制的动画,使用javascript会比较靠谱。而在实现一些小的交互动效的时候,就多考虑考虑CSS吧
    0 0
  • kideny
    2014-08-26 16:27:18
    js动画和CCS3动画,真是个新鲜的名词了。
    0 0
添加回答
开发与运维
使用钉钉扫一扫加入圈子
+ 订阅

集结各类场景实战经验,助你开发运维畅行无忧

推荐文章
相似问题
推荐课程