前言
本文翻譯自 Why Moving Elements With Translate() Is Better Than Pos:abs Top/left，本文有改動，添加了一些作者自己的理解，不當之處還請看客指出。
翻譯正文
目前我們對文檔中的某個元素進行移動有兩種方式，
1，使用transform提供的translate族函數進行緩動
2，對元素進行絕對定位，在制定時間內改變top/left值
但是，這兩種方式有什么區別呢？
長話短說，作者在通過模擬測試，並在chrome上檢測了動畫的FPS，發現了兩者的顯著區別：性能。
左上方的圖片是通過改變元素top/left進行動畫的幀率，而右上方則是調用translate函數的幀率。我們可以明顯看出左圖的每一幀都執行了相對較長時間的paint，在每一幀內，cpu都需要計算該元素的其他樣式，特別是相對需要復雜計算的盒陰影，漸變，圓角等樣式，最后都需要將這些樣式應用到該元素內。從這個角度看，如果對於較為老舊的移動設備進行相對復雜的動畫，那么效果肯定不理想。
而通過調用translate，會啟動硬件加速，即在GPU層對該元素進行渲染。這樣，CPU就會相對解放出來進行其他的計算，GPU對樣式的計算相對較快，且保證較大的幀率。我們可以通過2d和3d的transform來啟用GPU計算。
總結
最后，總結下對元素進行動畫的一些要點：
1，盡量使用keyframes和transform進行動畫，這樣瀏覽器會自身分配每幀的長度，並作出優化
2，如果非要使用js來進行動畫，使用requestAnimateFrame
3，使用2d transform而不是改變top/left的值，這樣會有更短的repaint時間和更圓滑的動畫效果
4，移動端的動畫效果可能會比pc端的差，因此一定要注意性能優化，盡量減少動畫元素的DOM復雜性，待動畫結束后異步執行DOM操作