html动画用css还是js,详解前端工程师常考面试题-关于 JS 动画和 css3 动画的差异性...

01Js：

首先，js动画是逐帧动画，几乎可以完成您想要的任何动画形式。 但因为内容不同会增加生产负担，并且资源占用相对较大。 但是它的优点也很明显：非常适合执行非常精致的动画，例如3D效果，人物或动物的急转弯等。 但是，如果帧速率太低，则从一个帧到另一个帧的过渡很可能是不自然且不一致的。

缺点：

JavaScript在浏览器的主线程中运行，还有其他JavaScript脚本、样式计算、布局、绘图任务需要在主线程中运行。干扰它们可能导致线程阻塞，从而导致帧丢失。

代码复杂度高于CSS动画。

优点：

JavaScript动画控制能力很强，可以控制动画在播放过程中：开始、暂停、播放、终止、取消都可以完成。

动画效果比CSS3动画更丰富，一些动画效果，如曲线运动、冲击闪烁、视差滚动等效果，只有JavaScript动画才能完成。

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

例如：

function mouseOver()

{

document.b1.src ="/i/eg_mouse.jpg"

}

function mouseOut()

{

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:100px;

height:100px;

background:red;

animation:myfirst 5s;

-moz-animation:myfirst 5s; /* Firefox */

-webkit-animation:myfirst 5s; /* Safari and Chrome */

-o-animation:myfirst 5s; /* Opera */

}

@keyframes myfirst

{

0% {background:red;}

25% {background:yellow;}

50% {background:blue;}

100% {background:green;}

}

总结：

如果动画只是简单的状态切换，不需要中间过程控制，在这种情况下，css动画是优选方案。

如果你在设计很复杂的富客户端界面或者在开发一个有着复杂UI状态的 APP。那么你应该使用js动画，这样你的动画可以保持高效，并且你的工作流也更可控。

举报/反馈