CSS3动画与JS动画的优缺点？

Posted 2021-02-13 进击的前端小白 葱呀

JS动画：

　　缺点：1.JS在浏览器的主线程中运行，而主线程还有其他的js脚本，样式布局，绘制任务等，对其干扰可能导致线程出现阻塞，从而造成丢帧的情况。

　　　　　2.JS动画代码复杂度高于CSS3动画。

　　优点：1.JS动画控制能力很强，可以在动画播放过程中对动画进行控制，使其开始或停止。

　　　　　2.动画效果比CSS3动画丰富，有些动画只有JS动画才能实现，比如曲线运动，冲击闪烁等。

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

 

CSS3动画：

　　缺点：

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

　　　　　2.代码冗长。想用CSS3实现稍微复杂一点的动画，最后CSS代码都会变得特别笨重。

　　优点：

　　　　　1.浏览器可以对动画进行优化。

 

结论：

　　如果动画只是简单的状态切换，不需要中间过程控制，在这种情况下，CSS3动画是优先选择方案。它可以让你将动画逻辑放在样式文件里面，而不会让你的页面充斥JS库。然而如果你在设计很复杂的富客户端界面或者开发一个有着复杂UI状态的APP，那么你应该使用JS动画，这样你的动画可以保持高效，并且你的工作流也更可控。所以，在实现一些小的交互动效的时候，就多多考虑CSS3动画，对于一些复杂控制的动画，使用JS动画比较可靠。