JS动画和CSS动画之间的区别和特点?

一、写在前面

之前我们讲了requestAnimationFrame用来解决js的相关动画出现卡顿的问题。现在我们来详细了解一下CSS和JS动画之间的区别和特点。

二、CSS动画

优点：

1、浏览器可以对css动画进行优化

浏览器可以对css动画进行优化，其优化原理类似于requestAnimationFrame，会把每一帧的DOM操作都集中起
来，在一次重绘和回流中去完成。一般来说频率为每秒60帧。
隐藏和不可见的dom不会进行重绘或回流，这样就会更少的使用CPU,GPU和内存使用量。

2、强制使用硬件加速

使用GPU来提高动画性能。

3、代码相对简单,性能调优方向固定
4、对于帧速不好的浏览器，css3可以做到自动降级，js则需要添加额外的代码。

缺点：

1、无法控制中间的某一个状态，或者是给其添加回调函数，不能半路翻转动画，没有进度报告。
2、如果想要实现相对复杂的动画效果时，css的代码冗余量很大。

三、js动画

优点：

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

缺点

1、javascript在浏览器的主线程中运行，而主线程中还存在其他需要运行的javascript脚本，样式计算、布局、绘制任务等,对其干扰导致线程可能出现阻塞，从而造成丢帧的情况。
2、js代码的复杂度要改与css动画

四、总结

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

1、代码的复杂度：js动画的复杂度要高一些
2、动画运行时，对动画的控制程度上，js 能够让动画，暂停，取消，终止，css动画不能添加事件
3、动画性能看：js动画多了一个js解析的过程，性能不如css动画好。

JS动画和CSS动画之间的区别和特点?相关推荐

原生js判断css动画结束 css 动画结束的回调函数
原文:原生js判断css动画结束 css 动画结束的回调函数 css3 的时代,css3--动画一切皆有可能: 传统的js 可以通过回调函数判断动画是否结束:即使是采用CSS技术生成动画效果,Jav ...
html设定元素动画执行,CSS动画 _Animation 教程_W3cplus
本文是为帮助您入门和熟悉CSS动画而编写的,使用它们来为您带来基于Web的接口以及为艺术带来生命.虽然W3C的CSS动画规范仍在修订中,但是如今它已经有大量的内容可以供我们使用了. 对我而言,CSS动 ...
js动画和css动画的差别
代码复杂度方面: 简单动画,css 代码实现会简单一些,js 复杂一些. 复杂动画的话,css 代码就会变得冗长,js实现起来更优. 动画运行时: 对动画的控制程度上,js 比较灵活,能控制动画暂停, ...
js操作设置css动画,使用 CSS3 和 JavaScript 制作链接反转 3D 动画 - 文章教程
使用 CSS3 和 JavaScript 制作链接反转 3D 动画,CSS 和 JavaScript 技巧用来创建顶层的悬浮效果,使用 transfomr-origin 和 transform-sty ...
HTML中的动画起名字,css动画
css动画首先要明白动画是一帧一帧的,由多个帧拼起来的动画 @keyframes 此为动画样式中的关键帧,用关键帧来控制css动画中的关键样式.相比较过渡更加的容易空值中间的部分其指示了一个过程到 ...
html的动画属性,css动画属性使用及实例代码(transition/transform/animation)
在开发中,一个好的用户操作界面,总会夹杂着一些动画.css用对少的代码,来给用户最佳的体验感,下面我总结了一些css动画属性的使用方法及用例代码供大家参考,在不对的地方,希望大佬直接拍砖评论. 1 t ...
html中flash的简单动画效果,css 动画效果
要搞就搞明白,一知半解时停止研究损失最大 css3意义: CSS3 动画通过 CSS3,我们能够创建动画,这可以在许多网页中取代动画图片.Flash 动画以及 JavaScript. 重点知识 C ...
转场动画：动画效果 css 动画 animate.css
实现动画的方式 <template><button @click="show = !show">改变</button><!-- 1..cs ...
html 气泡动画效果,CSS 动画实现动态气泡背景的方法
今天是节后上班第一天,早上醒来一睁眼,嗯?啊...?什么...?这是哪?我是谁?上什么班? 然鹅,还是被昨晚特意设置的八个闹钟:alarm_clock:吵醒,冬天早上起床的难度...想必各位都心有体会 ...