CSS和CANVAS动画
2019-08-13 本文已影响0人
九瀺
兼容问题
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没 有兼容性问题；
