JS动画（逐帧动画）

首先，在js动画是逐帧动画，是在时间帧上逐帧绘制帧内容，由于是一帧一帧的话，所以其可操作性很高，几乎可以完成任何想要的动画形式。但是由于逐帧动画的帧序列内容不一样，会增加制作负担，且资源占有比较大。

但它的优势也很明显：因为它相似与电影播放模式，很适合于表演很细腻的动画，如3D效果、人物或动物急剧转身等等效果。正是由于js对动画的操作复杂度比较高，能对动画有一个比较好的控制，如开始、暂定、回放、终止、取帧等，可以很精确的做到。因此可以js可以通过操作DOM和BOM来做一些酷炫的动态效果，以及爆炸特效，且兼容性比较好。

但是，如果帧率过低的话，会导致帧与帧之间的过渡很可能会不自然、不连贯。

缺点：

js是单线程的脚本语言，当js在浏览器主线程运行时，主线程还有其他需要运行的js脚本、样式、计算、布局、交互等一系列任务，对其干扰线程可能出现阻塞，造成丢帧的情况。
其次，js在做动画的时候，其复杂度是高于css3的，需要考虑一些计算，操作等方便问题。

优点：

JavaScript动画控制能力很强, 可以在动画播放过程中对动画进行控制：开始、暂停、回放、终止、取消都是可以做到的。
动画效果比css3动画丰富,有些动画效果，比如曲线运动,冲击闪烁,视差滚动效果，只有JavaScript动画才能完成
CSS3有兼容性问题，而JS大多时候没有兼容性问题

css3（补间动画）

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

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

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

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

缺点：

运行过程控制较弱，无法附加事件绑定回调函数。CSS动画只能暂停,不能在动画中寻找一个特定的时间点，不能在半路反转动画，不能变换时间尺度，不能在特定的位置添加回调函数或是绑定回放事件,无进度报告
代码冗长。如果想用 CSS 实现稍微复杂一点动画,最后CSS代码都会变得非常笨重。

优点：

浏览器可以对动画进行优化。
代码相对简单,性能调优方向固定
对于帧速表现不好的低版本浏览器，CSS3可以做到自然降级，而JS则需要撰写额外代码

总结

如果动画只是一些简单的状态切换，滑动等效果，不需要中间的控制过程，css3是比较好的选择，它直接在css文件中就可以实现，并不需要引入太多的js库。

而想做一些复杂的客户端界面，开发一个复杂ui的app，实现一个复杂纹理动画等，需要对页面进行精准的控制计算，应该使用js动画，这样动画可以保持高效，并且工作流也更可控。

因此，在实现一些小的交互动效的时候，就多考虑考虑CSS动画。对于一些复杂控制的动画，使用javascript比较可靠。

js动画与css3动画的区别相关推荐

css+动画优化,css3动画性能优化--针对移动端卡顿问题
一.使用css,jquery,canvas制作动画 1.Canvas 优点:性能好,强大,支持多数浏览器(除了IE6.IE7.IE8),画出来的图形可以直接保存为 .png 或者 .jpg的图形: 缺 ...
JavaScript 动画和CSS3动画有什么区别? (前端面试题！必会)
1.CSS动画优点: 1.1)浏览器可以对动画进行优化. 1.1.1 )浏览器使用requestAnimationFrame 比起setTimeout, setInterval 设置动画的优势主要是 ...
JavaScript动画和CSS3动画的区别
一.CSS动画优点浏览器可以对动画进行优化浏览器使用域requestAnimationFrame类似的机制,requestAnimationFrame比起setTimeout,setInterv ...
js动画和css3动画的差异性
js动画 ①灵活②兼容性好 ①在主线程中运行,容易丢帧 ②比css动画复杂 css动画 ①笨重②代码冗长 1.浏览器可以对动 ...
html动画效果结束返回,javascript判断css3动画结束 css3动画结束的回调函数
本文主要给大家介绍的是如何使用javascript判断CSS3动画效果结束,主要是使用了javascript的回调函数,其思路是一旦动画或变换结束,回调函数就会触发.不再需要大型类库支持,非常的简单实 ...
html5监听动画结束,css3动画是否结束监听事件
css3动画是否结束监听事件: var domObj = $("#id"); domObj [0].addEventListener("webkitAnimationEn ...
html css雪花动画效果,css3动画雪花特效
分享一个用强大的css3动画做的雪花背景,做网站背景很漂亮~ 补充一点关于animation的知识点 animation 必填项 animation-name 动画名称(关键帧名称) animatio ...
css3动画作品,CSS3 动画
CSS3,我们可以创建动画,它可以取代许多网页动画图像,Flash动画,和JAVAScripts. CSS3 动画 CSS3 @keyframes 规则要创建CSS3动画,你将不得不了解@keyfr ...
html动画用css还是js,javascript与css3动画结合使用小结
当Html5,css3已渐渐成为主流的时候,我还非常习惯的用js去做一些简单的动画.因为在桌面浏览器上, 并非所有的都支持css3.用户也倒是很奇怪,用户习惯并不是每个用户都可以被培养.总有不少人会觉 ...

js动画与css3动画的区别

文章目录

JS动画（逐帧动画）

css3（补间动画）

总结

js动画与css3动画的区别相关推荐

最新文章

热门文章