js动画和css3动画的区别

JS动画（逐帧动画）

　　首先，在js动画是逐帧动画，是在时间帧上逐帧绘制帧内容，由于是一帧一帧的话，所以他的可操作性很高，几乎可以完成任何你想要的动画形式。但是由于逐帧动画的帧序列内容不一样，会增加制作负担，且资源占有比较大。但它的优势也很明显：因为它相似与电影播放模式，很适合于表演很细腻的动画，如3D效果、人物或动物急剧转身等等效果。但是，如果帧率过低的话，会帧与帧之间的过渡很可能会不自然、不连贯。

　　js是单线程的脚本语言，当js在浏览器主线程运行时，主线程还有其他需要运行的js脚本、样式、计算、布局、交互等一系列任务，对其干扰线程可能出现阻塞，造成丢帧的情况。

　　其次，js在做动画的时候，其复杂度是高于css3的，需要考虑一些计算，操作等方便问题。

　　但是正是由于js对动画的操作复杂度比较高，能对动画有一个比较好的控制，如开始、暂定、回放、终止、取帧等，可以很精确的做到。因此可以js可以通过操作DOM和BOM来做一些酷炫的动态效果，以及爆炸特效，且兼容性比较好。

css3（补间动画）

　　制作方法简单方便。只需确定第一帧和最后一帧的关键位置即可，两个关键帧之间帧的内容由Flash自动生成，不需要人为处理。当然也可以多次添加关键帧的位置。

　　因为只设置几个关键帧的位置，所以在进行动画控制的时候时比较弱的。不能够在半路暂停动画，或者在动画过程中不能对其进行一些操作等。

　　css3在实现一些简单的滑动，翻转等特效的时候会很方便，但是想要做到一些酷炫的效果的时候，其操作往往可能会比js操作有更多的冗余。

　　css3在做动画的时候，浏览器可以对其进行一些优化，会比js使用更少的占用cpu资源，但是效果足够流畅。

结论

　　如果动画只是一些简单的状态切换，滑动等效果，不需要中间的控制过程，css3是比较好的选择，它直接在css文件中就可以实现，并不需要引入太多的js库。而你想做一些复杂的客户端界面，开发一个复杂ui的app，实现一个复杂纹理动画等，需要对页面进行精准的控制计算，js是不错的选择。