This content is over 14 years old. It may be obsolete and may not reflect the current opinion of the author.
中文： 寫了一個測試動畫順暢度的網頁，用了三種不同的處理方法：一種讓 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:
- Changing CSS top and left property.
- Chainging CSS background-position property.
- 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.
What do the numbers represent? Time in 0.01 seconds?
background-position manipulation is definitely smoother than absolute positioning, but <canvas> has a much smoother transition, especially when the transition steps are small.
The numbers are no# of cycles the browser really executed during 5 sec period. Sorry to left this out.
You should type < and > in the comment instead 😛
Since you have a fourth box, why don’t you try testing -webkit-transform as well? I’d love to see how it performs.
Also, what does the number of cycles that the browser executes then represent? How us thar related to how smooth the transition is?