css3 动画 vs js 动画

之前被问到过，css3 动画与 js 动画孰优孰劣，脑袋的第一反应就是性能上肯定 css3 动画会好很多，但别人说不对，我就在想，不对？难道还有别的原因吗？答案是肯定的。先来看看二者实现动画的原理吧。

css3 动画原理

css3 动画本质上是一直视觉上的动画，并未去触碰 DOM，换句话说，用 css3 实现的动画，原来的 DOM 的位置是不曾被改变的。

js 动画原理

js 动画是通过控制 DOM 的位置，来达到动的效果，是 DOM 一点点位移的结果，每一次的位移都要等待上一次的位移结束，而且因为频繁的操作 DOM，会带来频繁的重绘，所以会出现卡顿的现象。

孰优孰劣？

通过上面的分析，我们知道 css3 相比 js 实现的动画，会更流畅。我们还知道，过多的 js 脚本，页面的加载速度会受到影响，所以这在一定程度上肯定会影响到页面的性能。因此，推荐使用 css3 动画，而不建议使用 js 动画。

转载于:https://www.cnblogs.com/Canace22/p/css3_animation_vs_js_animation.html