当前位置：网站首页 > 技术文章 > 正文

JS 动画与 CSS 动画区别是什么?

myzbx 2025-03-11 19:11 32 浏览

css

优点

1、浏览器会自动优化css动画，使用类requestAnimationFrame的机制运行css动画，不会出现帧率丢失，白屏等问题。

2、元素隐藏时动画效果也会自动卸载，节省浏览器资源。

3、当动画只改变transform和opacity时，动画在浏览器合成线程中运行，在使用cpu合成情况下产生绘图指令，获得更流畅的动画效果

4、大部分浏览器都支持css动画，在低版本浏览器中使用css动画时css会自动降级适应，兼容性高。

缺点

1、无法在运行过程中控制动画的执行，无法在特定的地方或在运行过程中发出响应

2、实现复杂动画效果时代码冗长且往往只实现一个动画，维护性和复用性低

优点

1、动画控制力强，可实现css无法实现的动画效果，如动态的曲线运动，视差滚动等效果。

2、js绘制的动画基于dom，在操作上不存在兼容性问题。

3、可以使用requestAnimationFrame浏览器Api解决丢帧，白屏问题

4、可以在动画过程中获得数据响应，并实时调整。

5、可优化方向明确，动画操作可以封装为方法多次复用。

缺点

1、低版本浏览器可能不支持现代浏览器api会导致不同浏览器动画失效，兼容性一般

2、重复的操作DOM元素的css样式，对浏览器性能消耗大，容易造成丢帧，白屏等情况

3、js动画只运行在主线程上，造成阻塞问题。

4、实现复杂动画效果需要大量的逻辑与判断，复杂度高。

CSS 动画