JavaScript动画和CSS3动画的区别_css3和javascript是什么-优快云博客

本文链接：https://blog.youkuaiyun.com/Angel_Tears_/article/details/127025701

CSS动画适合简单的状态切换，具有浏览器优化和硬件加速的优势，但控制弱且无法绑定事件。JavaScript动画虽然代码复杂，可能受主线程影响，但提供更强的控制力和丰富的效果。选择哪种取决于动画复杂性和性能需求。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一.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比较可靠