css3动画和JS+DOM动画和JS+canvas动画比较
2017-02-02 11:33
288 查看
css3兼容:IE10+、FF、oprea(animation);safari、chrome(-webkit-animation)
js+dom:没有兼容问题;
js+canvas:IE9+;(性能最好)
性能:
css动画比JS流畅的前提:
1.chrome基础的浏览器;2.js执行一些昂贵的任务;3.css动画不触发layout和paint;(css3和js触发layout和paint时都会阻塞后续操作)
以下属性的修改不会触发layout和paint:
backface-visibility、opacity、perspective、perspective-origin、transform
不同点:
1.时间尺度上,keyframes动画粒度粗,js的动画粒度可以很精细;
2.CSS3里被支持的时间函数不多,不够零活;
3.css3动画无法做到支持两个状态以上的转换;
4.CSS3更为简单;
5.对于帧速表现不好的浏览器,CSS3可以做到自动优雅降级,JS还需要写额外的代码;
6.CSS3动画有天然的事件支持(AnimationEnd/TransitionEnd)
7.CSS3有兼容性问题。JS没 有兼容性问题;
相关文章推荐
- 【动画】简易制作贝塞尔曲线动画(JS+css3+canvas)
- js在Firefox与IE中对DOM对像的引用的比较
- 原生js和jQuery的DOM操作函数速度比较
- HTML5的一些知识:Canvas KineticJS旋转动画教程
- 用css3和canvas实现的蜂窝动画效果
- Bounce.js – 快速创建漂亮的 CSS3 动画效果
- JS应用DOM入门:和DHTML对象模型的比较
- Bounce.js-可视化CSS3动画代码生成js插件
- JS应用DOM入门(1): 和DHTML对象模型的比较
- 纯CSS3实现带动画效果导航菜单无需js
- 利用JS和css3实现动画效果替代js的时间事件
- 一个JS动画框架-基于HTML5::Canvas
- HTML5 实现小车动画效果(Canvas/CSS3/JQuery)
- HTML5 实现小车动画效果(Canvas/CSS3/JQuery)
- HTML5里面的东西:Canvas KineticJS规模动画教程!
- js在Firefox与IE中对DOM对像的引用的比较
- [置顶] HTML5 实现小车动画效果(Canvas/CSS3/JQuery)
- 我的js游戏小引擎 —— 可使用canvas模式或DOM模式
- HTML5----kinetic,CSS3(Canvas)--小丑动画
- 一款模拟CSS3动画的js插件-move.js