css3 动画 vs js 动画

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

css3 动画原理

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

js 动画原理

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

孰优孰劣？

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