A head to head comparison of CSS transitions and jQuery's animate. Rather than setting a timer to run repeatedly, transitions are handled natively by the browser. In my rather unscientific testing, transitions are always quicker, running with a higher frame rate, especially with high numbers of elements. They also have the advantage that colours can be animated easily, rather than having to rely on plugins.
Click the button to toggle the transition. Scroll down to see the jQuery version.Click me!
Click below to see the animation. Scroll up to see the CSS3 transitions version.Click me!
To examine more closely what happens here, I used the Timeline view in the Webkit Inspector, and recorded the section whilst I clicked the buttons.
The image above shows the full extent of the animation above. There are a couple of things to notice here. Firstly the frame rate has been capped so unnecessary calculations and repaints aren't done. Secondly, only the area needed is repainted, in this case, the 712px × 652px rectangle surrounding the squares. The browser is able to decide on the number of frames, and how much things should change up front, and is able to sensibly decide what to do. The animation is either going to complete, or pause/stop part way through - we aren't going to suddenly be animating different properties part way through.
In this animation, only around 40 events happened.
A different story is shown here. Recalculate Style is run for every element that needs to be animated. This means that literally thousands (around 9,500) styles are recalculated during the animation, even though they are all identical. Because of this, on my machine, only a small number of repaints are completed. The browser can't predict up front what is going to happen, as the JS could do anything at any time - there is no guarantee that the animation is a simple tweening animation.
Reducing the number of elements by a large margin shows that usually, the order is: 1) Calculate all styles, 2) Set timers and Paint. With 10 rows of squares above, the first step takes around 0.4 seconds, meaning there is a fairly noticeable lag before the animation starts. For 10 rows of elements just over 1000 events (paints, calculate style etc) occur.