兼容问题
css兼容:IE10+、FF、oprea(animation);safari、chrome(-webkit-animation)
canvas兼容:IE9+
JS+DOM兼容:没有兼容问题
css动画比JS流畅的前提:
- chrome基础的浏览器;
- js执行一些昂贵的任务;
- css动画不触发layout和paint;
(css3和js触发layout和paint时都会阻塞后续操作)以下属性的修改不会触发layout和paint:
backface-visibility、opacity、perspective、perspective-origin、transform
不同点:
- 时间尺度上,keyframes动画粒度粗,js的动画粒度可以很精细;
- CSS3里被支持的时间函数不多,不够灵活;
- css3动画无法做到支持两个状态以上的转换;
- CSS3更为简单;
- 对于帧速表现不好的浏览器,CSS3可以做到自动优雅降级,JS还需要写额外的代码;
- CSS3动画有天然的事件支持(AnimationEnd/TransitionEnd)
- CSS3有兼容性问题。JS没 有兼容性问题;
网友评论