CSS3动画与JS动画的优缺点?

更新日期: 2019-03-16 阅读: 3.5k 标签: 动画

JS动画:

缺点:

1.JS在浏览器的主线程中运行,而主线程还有其他的js脚本,样式布局,绘制任务等,对其干扰可能导致线程出现阻塞,从而造成丢帧的情况。

2.JS动画代码复杂度高于css3动画。

优点:

1.JS动画控制能力很强,可以在动画播放过程中对动画进行控制,使其开始或停止。

2.动画效果比CSS3动画丰富,有些动画只有JS动画才能实现,比如曲线运动,冲击闪烁等。

3.CSS3有兼容性问题,而JS大多时候没有兼容性问题。

 

CSS3动画:

缺点:

1.运行过程较弱,无法附加绑定回调函数,CSS3动画只能暂停,不能在动画中寻找一个特定的事件点,不能在半路反转动画,不能变换事件尺度,不能在特定的位置添加回调函数或是绑定回放事件,无进度报告。

2.代码冗长。想用CSS3实现稍微复杂一点的动画,最后CSS代码都会变得特别笨重。

优点:

1.浏览器可以对动画进行优化。

 

结论:

如果动画只是简单的状态切换,不需要中间过程控制,在这种情况下,CSS3动画是优先选择方案。它可以让你将动画逻辑放在样式文件里面,而不会让你的页面充斥JS库。

然而如果你在设计很复杂的富客户端界面或者开发一个有着复杂UI状态的APP,那么你应该使用JS动画,这样你的动画可以保持高效,并且你的工作流也更可控。所以,在实现一些小的交互动效的时候,就多多考虑CSS3动画,对于一些复杂控制的动画,使用JS动画比较可靠。  

本文内容仅供个人学习、研究或参考使用,不构成任何形式的决策建议、专业指导或法律依据。未经授权,禁止任何单位或个人以商业售卖、虚假宣传、侵权传播等非学习研究目的使用本文内容。如需分享或转载,请保留原文来源信息,不得篡改、删减内容或侵犯相关权益。感谢您的理解与支持!

链接: https://fly63.com/article/detial/2393

相关推荐

css transition 实现滑入滑出

transition是css最简单的动画。 通常当一个div属性变化时,我们会立即看的变化,从旧样式到新样式是一瞬间的,嗖嗖嗖!!!但是,如果我希望是慢慢的从一种状态,转变成另外一种状态,怎么办? transition可以做到。

css3贝塞尔曲线(cubic-bezier)

css3 animation模块,其中animation-timing-function 和 transition-timing-function两个属性来控制动画速度分别提供了ease,liner,ease-in,ease-out

CSS动画@keyframes的用法

CSS动画允许大多数HTML元素的动画,而无需使用JavaScript或Flash!IE10+支持该属性的。其他低浏览器版本数字后跟-ms-, -webkit-,-moz-或-o-指定使用前缀的第一个版本。

css @keyframes属性 语法

@keyframes是CSS的一种规则,可以用来定义CSS动画的一个周期的行为,创建简单的动画。作用:通过 @keyframes 规则,您能够创建动画。

css3实现椭圆轨迹旋转

X轴Y轴在一个矩形内移动;设置动画延时设置Y轴延时为动画时长的一半, 运动轨迹变成菱形;设置三次贝塞尔曲线,为了看起来有立体感添加scale属性,scale动画应该是X轴和Y轴的时间总和

css环形滚动_内容加载的环形滚动动画效果

创建一个没有背景的圆,然后声明透明度为0.1的黑色边框(看起来是灰色),修改左侧边框颜色。此时会有一个静态的看起来只有左边框有颜色的空心圆。然后声明一个该元素逆时针旋转360度的动画,并让该动画无限播放(infinite)即可

Vue.js动画笔记_vue实现动画效果

Vue.js中的元素动画或页面跳转动画有多种实现方式比如:1、自己手动写CSS3动画来实现2、使用第三方CSS动画库如:Animate.css3、在构子函数中操作DOM4、使用第三方Js动画库如:Velocity.js。

动画函数的绘制及自定义动画函数

制作动画效果离不开动画运动函数,而我们用得最多的无疑就是Tween.js。根据不同的数学公式原理,Tween.js划分出了不同的动画类型,每种动画类型里面都包含以下的缓动类型:ease in 先慢后快、ease out 先块后慢、ease in out 先慢后快再慢

只用 CSS 就能做到的像素画/像素动画

这篇文章将会介绍只用 CSS 就能制作像素画·像素动画的方法。虽说纯 CSS 就能做到,但是为了更高的可维护性,也会顺便介绍使用 Sass 的制作方法。

css3 过渡和动画

在没有过渡属性的时候,当一个元素的属性值发生变化时,浏览器就会将个这个元素瞬间渲染成新属性值的样式。例如一个定位元素top:0,动态修改成top:100px,这个元素就瞬间跑到100px的位置,有时候我们为了达到某种视觉效果

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!