css3 动画 vs js 动画

以前被问到过，css3 动画与 js 动画孰优孰劣，脑壳的第一反应就是性能上确定 css3 动画会好不少，但别人说不对，我就在想，不对？难道还有别的缘由吗？答案是确定的。先来看看两者实现动画的原理吧。

css3 动画原理

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

js 动画原理

js 动画是经过控制 DOM 的位置，来达到动的效果，是 DOM 一点点位移的结果，每一次的位移都要等待上一次的位移结束，并且由于频繁的操做 DOM，会带来频繁的重绘，因此会出现卡顿的现象。

孰优孰劣？

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