一.CSS动画

优点

1. 浏览器可以对动画进行优化
  1. 浏览器使用域requestAnimationFrame类似的机制,requestAnimationFrame比起setTimeout,setInterval设置动画的主要优势是:
    1. requestAnimationFrame会把每一帧中的所有DOM操作集中起来,在一次重绘或回流中就完成,并且重绘或回流的时间间隔紧紧跟随浏览器的刷新频率,一般来说,整个频率为每秒60帧
    2. ,在隐藏或不可兼得元素中requestAnimationFrame不会进行重绘或回流,这意味着更少的CPU和GPU和内存使用量
  2. 强制使用硬件加速(通过GPU来提高动画性能)
2. 代码相对简单,性能调优方向固定
3. 对于帧率表现不好的低版本的浏览器,CSS3可以做到自动降级而js则需要撰写额外代码

缺点

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

二.JS动画

优点

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

缺点

1. JavaScript再浏览器的主线程中运行,而主线程中还有其他需要运行的JavaScript脚本,样式计算,布局,绘制任务等,对其干扰导致线程可能出现阻塞,从而造成丢帧的情况
2. 代码的复杂度高于CSS动画

三.CSS动画和js动画的差异

代码复杂度,js动画代码相对复杂一些
动画运行时,对动画的控制程度上,JS能够让动画暂停取消终止 CSS动画不能添加事件
动画性能看 js动画多了个一个js解析的过程,性能不如CSS动画好

四.总结:

如果动画只是简单的状态切换,不需要中间过程控制,这种情况下,CSS动画是优选方案,它可以让你将动画逻辑放在样式文件里,而不会让你的页面充斥JavaScript库,然而如果你在设计很复杂的客户端界面或者开发一个有着复杂UI状态的APP,那么你应该使用JS动画,这样你的动画可以保持高效,并且你的工作流也更可控,所以再实现一些小的交互动画的时候,就多考虑CSS动画,对于一些复杂控制的动画,使用JavaScript比较可靠

JavaScript动画和CSS3动画的区别相关推荐

js动画与css3动画的区别
欢迎学习交流!!! 持续更新中- 文章目录 JS动画(逐帧动画) css3(补间动画) 总结 JS动画(逐帧动画) 首先,在js动画是逐帧动画,是在时间帧上逐帧绘制帧内容,由于是一帧一帧的话,所以其可 ...
css+动画优化,css3动画性能优化--针对移动端卡顿问题
一.使用css,jquery,canvas制作动画 1.Canvas 优点:性能好,强大,支持多数浏览器(除了IE6.IE7.IE8),画出来的图形可以直接保存为 .png 或者 .jpg的图形: 缺 ...
JavaScript 动画和CSS3动画有什么区别? (前端面试题！必会)
1.CSS动画优点: 1.1)浏览器可以对动画进行优化. 1.1.1 )浏览器使用requestAnimationFrame 比起setTimeout, setInterval 设置动画的优势主要是 ...
html动画效果结束返回,javascript判断css3动画结束 css3动画结束的回调函数
本文主要给大家介绍的是如何使用javascript判断CSS3动画效果结束,主要是使用了javascript的回调函数,其思路是一旦动画或变换结束,回调函数就会触发.不再需要大型类库支持,非常的简单实 ...
css动画帧动画效果,CSS3动画之逐帧动画
什么是逐帧动画要了解 CSS3 逐帧动画,首先要明确什么是逐帧动画. 看一下维基百科中的定义: 定格动画,又名逐帧动画,是一种动画技术,其原理即将每帧不同的图像连续播放,从而产生动画效果. 简而言之 ...
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 ...
js动画和css3动画的差异性
js动画 ①灵活②兼容性好 ①在主线程中运行,容易丢帧 ②比css动画复杂 css动画 ①笨重②代码冗长 1.浏览器可以对动 ...

JavaScript动画和CSS3动画的区别

一.CSS动画

优点

缺点

二.JS动画

优点

缺点

三.CSS动画和js动画的差异

四.总结:

JavaScript动画和CSS3动画的区别相关推荐

最新文章

热门文章