Animation Smoothness

中文: 寫了一個測試動畫順暢度的網頁,用了三種不同的處理方法:一種讓 JavaScript 去改 CSS 的 top 和 left、另一種是改 background-position、最後就是用 HTML 5 的 <canvas> 來繪圖。結論是 background-position 最順,另外 Webkit 感覺比 Gecko 厲害一點。

I wrote a little test to find out which way of doing animation is the most smooth one. The three animation being tested are:

  1. Changing CSS top and left property.
  2. Chainging CSS background-position property.
  3. Copy the image into a <canvas>

background-position seems to be wining on both Webkit and Gecko; Gecko preformed poorly on top/left property changing when full page zoom is in effect. Also Webkit preforms better than Gecko in all three animations.