Question

I’m looking for the best way to animate several divs onscreen. I tried jQuery, but it started getting skippy after I had > 5 elements on the screen. Raphael.js gave me the same problem. So, what is the best way to animate 5-6 divs on a screen at once? They’re just moving horizontally across the screen.

Would CSS3’s translate2d be good for this? I recall reading somewhere that you can severely optimize performance by using translate3d instead. Is that applicable in my case?

Answer 1

If your target browsers support CSS3, you can achieve much smoother animations using translate2d. If you need to animate all items together (i.e. the animation rules are the same for each one of them), you can just create a class

.animTarget{animation:translate3d(100, 0, 0)}

And then in your javascript code, say:

$("animation-target-selector").addClass('animTarget')

I have found that animating things like this is easier than doing something like:

$("animation-target-selector").css('animation', 'translate3d(100, 100, 0)');

Because it adds it to the style attribute of each and every dom element.