左vs CSS3動畫中的translateX

Question

我制造了這個小提琴 ; 紅色框使用CSS left屬性設置動畫，藍色框使用CSS Transform TranslateX屬性設置動畫。

在Chrome 21中，兩個動畫都具有相同的性能，並且都流暢運行。

但是在Safari（適用於Windows）中，藍色的動畫效果很流暢，而紅色的動畫效果很差。 （似乎藍色的是硬件加速的，而紅色的不是硬件加速的）

第一個問題是，最佳選擇是什么？ 總體上哪個更好？ （更多瀏覽器等的支持）

接下來，是否沒有辦法在Safari的left和top CSS屬性中對硬件進行動畫加速？ （由於我實際上想將div移到窗口之外，所以我認為使用left屬性會更好。）

Answer 1

在那里可以平移對象，而不會影響DOM中的位置。 盡管它顯然移到了屏幕上的另一個位置，但DOM不會受到影響。 這就是為什么翻譯功能的性能通常更好的原因。

請注意，您不會在每種瀏覽器中看到相同的性能特征。

這是JSPerf概述的不同轉換/移動功能。 滾動到底部以查看每個瀏覽器的統計信息。

將來很可能會改變。