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 動畫時中斷正在進行的操作以強制新的繪製週期。