前言
我们在做项目的时候,通常需要配合一些动画效果,从而给用户更好的体验。使用JavaScript和CSS都可以完成动画,那么它们各有什么优点和缺点呢?一起来看一下吧~
一、CSS动画
1.优点
- 浏览器可以对动画进行优化
浏览器使用与requestAnimationFrame
类似的机制,requestAnimationFrame
比起setTimeout
、setInterval
设置动画的优势主要是:①requestAnimationFrame
会把每一帧中的所有DOM操作集中起来,在一次重绘或回流中完成,并且重绘或回流的时间间隔紧紧跟随浏览器的刷新频率,一般来说,这个频率为60帧每秒。②在隐藏或不可见的元素中requestAnimationFrame
不会进行重绘或回流,这当然就意味着更少的CPU和GPU和内存使用量。
强制使用硬件加速(通过GPU来提高动画性能)。 - 代码相对简单,性能调优方向固定。
- 对于帧率表现不好的低版本浏览器,CSS3可以做到自然降级,而JS则需要撰写额外代码。
2.缺点
- 运行过程控制较弱,无法附加事件绑定回调函数。CSS动画只能暂停,不能在动画中寻找一个特定的时间点&