css
优点
1、浏览器会自动优化css动画,使用类requestAnimationFrame的机制运行css动画,不会出现帧率丢失,白屏等问题。
2、元素隐藏时动画效果也会自动卸载,节省浏览器资源。
3、当动画只改变transform和opacity时,动画在浏览器合成线程中运行,在使用cpu合成情况下产生绘图指令,获得更流畅的动画效果
4、大部分浏览器都支持css动画,在低版本浏览器中使用css动画时css会自动降级适应,兼容性高。
缺点
1、无法在运行过程中控制动画的执行,无法在特定的地方或在运行过程中发出响应
2、实现复杂动画效果时代码冗长且往往只实现一个动画,维护性和复用性低
js
优点
1、动画控制力强,可实现css无法实现的动画效果,如动态的曲线运动,视差滚动等效果。
2、js绘制的动画基于dom,在操作上不存在兼容性问题。
3、可以使用requestAnimationFrame浏览器Api解决丢帧,白屏问题
4、可以在动画过程中获得数据响应,并实时调整。
5、可优化方向明确,动画操作可以封装为方法多次复用。
缺点
1、低版本浏览器可能不支持现代浏览器api会导致不同浏览器动画失效,兼容性一般
2、重复的操作DOM元素的css样式,对浏览器性能消耗大,容易造成丢帧,白屏等情况
3、js动画只运行在主线程上,造成阻塞问题。
4、实现复杂动画效果需要大量的逻辑与判断,复杂度高。