內容參考以下文章
http://www.itdecent.cn/p/8a21deb5e0b2
https://www.smashingmagazine.com/2016/12/gpu-animation-doing-it-right/
https://juejin.im/entry/59dc9aedf265da43200232f9

使用transform更好。

瀏覽器渲染頁面涉及到兩個線程，渲染線程和排版線程。
渲染主線程進行元素的尺寸、位置等的計算，并且繪制出位圖，然后交給排版線程。
排版線程通過GPU進行圖像合成最終繪制到屏幕上。

瀏覽器在渲染的時候，當渲染對象處于相同的坐標空間時，就會形成渲染層，多個渲染層公用一個GraphicsLayer來向屏幕進行像素繪制。而某些特殊的渲染層，被稱為合成層（Compositing Layer），擁有獨立的GraphicsLayer，然后會被GPU直接處理。

那么不同的屬性引起的重新繪制分為3種情況：

1. layout -> paint -> composite
2. paint -> composite
3. composite

transform和opacity屬性，會使得瀏覽器將該元素直接提升到合成層。

于是，使用絕對定位做動畫時，主線程需要不斷的計算位置，合成位圖，同步到合成線程繪制，消耗較大；而使用transform進行動畫時，主線程只需第一次時進行布局計算和位圖繪制，之后的動畫過程都在GPU進行繪制，兩個線程不再來回切換，因此比較流暢。

另外，其他可能導致瀏覽器將一個元素提升到合成層的因素包括：

• 3D變換：translate3d，translateZ
• video、canvas、iframe元素
• 通過Element.animate()的transform和opacity動畫
• 通過CSS transition 和animation設置的transform和opacity動畫
• position: fixed
• will-change
• filter