What is the fastest way of animating multiple sprites under html5?

I'm trying to animate 50 or so sprites at the same time, using a setInterval of 30ms.

What gives bettter performance? Using canvas? Or using -webkit-transform and divs? Does anyone have any tips 开发者_运维百科on making animations for html5?

---

The short answer to your question is that Canvas should give better performance.

This post from Facebook engineering should also be helpful in your understanding of Canvas speeds:

http://www.facebook.com/notes/facebook-engineering/html5-games-01-speedy-sprites/491691753919

---

Using Javascript and HTML5 canvas will give less headache than -webkit-transform and divs when you need to make changes to the animation.

I personally recommend HTML5 canvas and Javascript for compatibility (for now), since -webkit-transform is only available on Webkit browsers.

Sticking to the rule that human eyes cannot see frame changes beyond the speed of 20 frames per second (FPS), A setInterval() timer of 0.05s (aka 50ms) would probably be the best.

I follow how XNA game framework works, so I usually have 2 setInterval() calls, 1 to do the logic updates, and the other to draw the canvas.