关于js动画和css3动画的差异性

[问答题]

关于js动画和css3动画的差异性

拯救世界的光太郎

JS动画

优点：

动画控制能力强，可以在动画播放过程中，对动画进行精细控制，开始、暂停、终止、取消都是可以做到的。
动画效果比C3动画丰富，比如曲线运动，冲击闪烁，视差滚动效果，只有js动画才能完成。
大多数情况下没有兼容性问题，而C3动画有兼容性问题。

缺点：

JS动画代码复杂度高于C3动画（完成的功能更强大，自然就会更复杂一些，个人不感觉是缺点）
JS动画在浏览器的主线程中执行，而主线程还有其他复杂JS脚本时，可能出现阻塞从而出现丢帧的情况。
频繁操作DOM的CSS属性，不停地执行重绘和重排，这对于性能的消耗是很大。

C3动画

优点：

css动画比较少或者不触发重绘和重排。
部分属例如使用transform的translateZ进行3D变换性能够启动3D加速和GPU硬件加速。

缺点：

对比JS的优点就是CSS的缺点。

编辑于 2021-04-10 14:59:01 回复(0)

火柴哥

Js动画缺点：1Js在浏览器的主线程中运行，而在主线程当中需要运行Js的脚本，样式计算，布局，会话任务等，会对其产生影响可能会出现阻塞，从而出现掉帧的情况2js的代码复杂度要高于css优点：1js动画的可控性更加的好，可以在动画播放的过程中进行暂停，回放，取消等操作2动画效果比css3更加丰富3css3有兼容问题，而js大部分情况下没有兼容问题 CSS动画缺点：1控制能力较差，只能播放，或者暂停2代码冗长，在想实现相对复杂的动画时，css的代码就会非常笨重优点:强制使用硬件加速

发表于 2020-05-24 21:07:07 回复(0)