CSS中的翻譯和頂端有什麼區別

Question

CSS中的translate和top有什麼區別？

例子：

是什麼

這之間的區別：http://jsfiddle.net/QS4Ha/

這：http://jsfiddle.net/GWYPb/

哪個更好用？

Answer 1

看看這個html5 Rocks article強烈建議動畫與翻譯。

爲什麼？更改'頂部'屬性觸發佈局，翻譯不會。

你應該總是期待以避免動畫屬性將觸發 佈局或油漆，這兩者都是昂貴的，並且可能導致跳過 幀。聲明性動畫優於必須的，因爲瀏覽器有機會提前優化。

另見this post：

頂部/左具有非常大的時間繪製的每個幀，這導致在一個 過渡更加起伏。包含一些大框陰影的所有CSS都是 ，它們是在CPU上計算出來的，並且每幀都與該漸變背景 合成。另一方面，翻譯版本則將筆記本電腦 元素提升到GPU上自己的層（稱爲 RenderLayer）。現在它位於其自己的層上，任何2D變換，3D變形或不透明度變化都可以純粹發生在GPU上，這將使得 保持非常快的速度並且仍然使我們獲得快速的幀速率。