css动画与js动画的优缺点比较

css

在网页上面使用 CSS 和使用 JavaScript都可以创建动画。所以当我们想要在网页上面创建动画的时候就会面临一个问题：到底使用JavaScript还是CSS动画?下面我们来 分析一下它们各自的优缺点：
css动画优点

1.代码的复杂度低。
2.浏览器可以对动画进行优化。
3.占用的内存更小，运行更加流畅。
4.对于帧速表现不好的低版本浏览器，CSS3可以做到自然降级，而JS则需要撰写额外代码

css动画缺点

(1)运行过程控制较弱,无法附加事件绑定回调函数。CSS动画只能暂停,不能在动画中寻找一个特定的时间点，不能在半路反转动画，不能变换时间尺度，不能在特定的位置添加回调函数或是绑定回放事件,无进度报告

(2)代码冗长。如果要实现一些比较复杂的动画css动画代码就比较冗长。

js动画优点

(1)JavaScript动画控制能力很强, 可以在动画播放过程中对动画进行控制：开始、暂停、回放、终止、取消都是可以做到的。

(2)动画效果比css3动画丰富,有些动画效果，比如曲线运动,冲击闪烁,视差滚动效果，只有JavaScript动画才能完成

(3)CSS3有兼容性问题，而JS大多时候没有兼容性问题

js动画缺点

(1)JavaScript在浏览器的主线程中运行，而主线程中还有其它需要运行的JavaScript脚本、样式计算、布局、绘制任务等,对其干扰导致线程可能出现阻塞，从而造成丢帧的情况。

(2)代码的复杂度高。

结论
css3可以很便捷的实现一些动画效果，并且在支持css3的浏览器下表现不错，用js做动画的话，除非是在非常古老的浏览器下运行，一般也不会有卡顿问题,不过还是建议在支持css3的浏览器下使用css3去做动画。如果要兼容那些非常古老的浏览器的话，还是用js去写动画，如果只需要兼容现代浏览器的，尽量使用css3做动画.如果动画只是简单的状态切换，不需要中间过程控制，在这种情况下，css动画是优选方案。它可以让你将动画逻辑放在样式文件里面，而不会让你的页面充斥 Javascript 库。然而如果你在设计很复杂的客户端界面或者在开发一个有着复杂UI状态的 APP。那么你应该使用js动画，这样你的动画可以保持高效，并且你的工作流也更可控。对于一些复杂控制的动画，使用javascript会比较靠谱。而在实现一些小的交互动效的时候，就多考虑考虑CSS吧!

想了解更多请点击：CSS 对比 JavaScript 动画