requestAnimationFrame

当流畅地设置 DOM 元素的动画时，我们仅限于以下 CSS 转换：

• 位置 - transform: translate (npx, npx);
• SCALE - transform: scale(n);
• 旋转 - transform: rotate(ndeg);
• OPACITY - opacity: 0;

但是，使用这些并不能保证你的动画会流畅，因为它会导致浏览器启动新的 paint 周期，无论其他内容是什么。基本上，paint 制作效率低，你的动画看起来很笨拙，因为每秒帧数（FPS）会受到影响。

为了保证尽可能平滑的 DOM 动画，requestAnimationFrame 必须与上述 CSS 过渡一起使用

这样做的原因是因为 requestAnimationFrame API 让浏览器知道你希望动画在下一个周期 8 发生，而不是在调用非 RAF 动画时中断正在进行的操作以强制新的绘制周期。