01Js：
首先，js动画是逐帧动画，几乎可以完成您想要的任何动画形式。但因为内容不同会增加生产负担，并且资源占用相对较大。但是它的优点也很明显：非常适合执行非常精致的动画，例如3D效果，人物或动物的急转弯等。但是，如果帧速率太低，则从一个帧到另一个帧的过渡很可能是不自然且不一致的。
缺点：
JavaScript在浏览器的主线程中运行，还有其他JavaScript脚本、样式计算、布局、绘图任务需要在主线程中运行。干扰它们可能导致线程阻塞，从而导致帧丢失。
代码复杂度高于CSS动画。
优点：
JavaScript动画控制能力很强，可以控制动画在播放过程中：开始、暂停、播放、终止、取消都可以完成。
动画效果比CSS3动画更丰富，一些动画效果，如曲线运动、冲击闪烁、视差滚动等效果，只有JavaScript动画才能完成。
CSS3有兼容性问题，而JS大多数时候没有兼容性问题。
例如：
ahref=/index.htmltarget=_blank
imgborder=0alt=VisitW3School!src=/i/eg_mouse2.jpgname=b1onmouseover=mouseOver()onmouseout=mouseOut()//a
functionmouseOver()
{
document.b1.src=/i/eg_mouse.jpg
}
functionmouseOut()
{
document.b1.src=/i/eg_mouse2.jpg
}
02Css3：
动画是使元素从一种样式逐渐变化为另一种样式的效果。
当实现一些简单的滑动，翻转和其他特殊效果时，Css3非常方便，但是当你想要实现一些很酷的效果时，它的操作通常比js操作具有更多的冗余。
在css3中制作动画时，浏览器可以进行一些优化，这将比js使用更少的cpu资源，但是效果足够流畅。
优点：
（1）浏览器可以优化动画。
（2）代码相对简单，并且性能调整方向是固定的。
（3）对于帧速率性能较差的低版本浏览器，CSS3可以自然降级，而JS需要编写其他代码。
缺点：
1.运行过程的控制较弱，不可能附加事件绑定回调函数。CSS动画只能暂停，无法在动画中找到特定的时间点，不能中途反转动画，无法更改时间比例，无法添加回调函数或将播放事件绑定到特定位置，并且没有进度报告
2。代码冗长。如果您想使用CSS来实现稍微复杂一点的动画，那么CSS代码最终将变得非常繁琐。
例如:
div
{
width:px;
height:px;
background:red;
animation:myfirst5s;
-moz-animation:myfirst5s;/*Firefox*/
-webkit-animation:myfirst5s;/*SafariandChrome*/
-o-animation:myfirst5s;/*Opera*/
}
keyframesmyfirst{
0%{background:red;}
25%{background:yellow;}
50%{background:blue;}
%{background:green;}
}
总结：
如果动画只是简单的状态切换，不需要中间过程控制，在这种情况下，css动画是优选方案。
如果你在设计很复杂的富客户端界面或者在开发一个有着复杂UI状态的APP。那么你应该使用js动画，这样你的动画可以保持高效，并且你的工作流也更可控。
全新超实用性的Python零基础入门到就业体验课+视频+源码淘宝￥2购买已下架