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 动画比较可靠.
来源: http://www.bubuko.com/infodetail-2987840.html