css动画与js动画的区别

css动画与js动画的区别

css动画：

css实现的是补间动画，只需确定第一帧和最后一帧的关键位置，或者增加几个关键帧的位置即可实现

优点：

• 性能消耗较小
• 代码相对简单,性能调优方向固定
• 浏览器可以对动画进行优化。

缺点：

• 只适合一些简单的动画，无法做较为复杂的动画
• 会出现浏览器兼容性问题

js动画

js动画是逐帧动画，是在时间帧上逐帧绘制帧内容（类似于电影播放模式）

优点：

• 适合做一些复杂的动画，可操作性高，能控制动画暂停，取消，终止等
• 兼容性较高

缺点：

• 性能消耗较大，容易出现阻塞，丢帧。

总结：

在做一些简单的动画时推荐使用css动画
在做一些复杂或者有兼容性问题的动画时使用js动画