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没 有兼容性问题;