css3动画与js动画

比较

兼容性

css3

兼容性不好,IE10才开始支持。

js

兼容性好,甚至可以兼容IE6。

性能

css3

在性能上会稍微好一些,浏览器会对CSS3的动画做一些优化(新建图层来跑动画)。
移动端的开发也有这种hack,开启硬件加速,来解决可能的卡顿问题:

css-webkit-transform: translate3d(0, 0, 0);
js

在现代浏览器中性能的差异可以忽略,但是对于帧速表现不好的低版本浏览器,CSS3可以做到自然降级,而JS则需要撰写额外代码。

复杂度

css3

代码相对简单,但是也意味着在动画的控制上不够灵活。部分动画效果不能实现。CSS动画有天然事件支持(TransitionEnd、AnimationEnd)。

js

代码复杂,需要自己写事件,通常需要引入库来减少工作量。粒度控制很细,可以单帧的控制、变换,写出复杂的动画。

结论

在有兼容性要求或者有复杂控制的动画的情况下可以使用js动画,其他情况就使用css3动画。

你可能感兴趣的:(css3动画与js动画)