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.