A quick demonstration of a CSS transition animation vs a javascript (in this case MooTools) animation on a website I’m building. Notice that the CSS animation can do sub-pixel rendering, which might make the text a little blurry, but hell it’s so smooth compared to javascript which has to move an element pixel by pixel.
In our quick tests with desktop browsers, large animations (ie, over a large amount of pixels) are generally quicker - or at least give less screen redraw bugs - when doing them by javascript methods, and you’d never see any sub-pixel rendering anyway. I guess that’s because javascript animations are everywhere, and browsers are well optimised and debugged for them.
But small pixel animations appear much more jerky when done by javascript, where CSS transitions are visibly much, much smoother.
Having said that, on iOS devices CSS transitions win almost every time in speed and smoothness.
This site used modernizr to detect the capabilities of the browser and get it to carry out animations by the most appropriate method.
Note that webkit browsers aren’t the only ones with this sub pixel animation capability, FireFox 4 performs just as well with it’s implementation of CSS transitions. If only IE9 supported transitions…
