CSS3 Animations make a huge impact on reducing CPU and making animation more efficient in the browser, but I don’t think we’ll ever get away from sometimes having to use JavaScript to do animations.

requestAnimationFrame is a neat new draft spec that a lot of the browsers are starting to support in nighty builds. It basically sets up a global animation run loop for your entire page. It’s really useful for reducing CPU usage when doing JavaScript based animations because it allows the browser to only redraw once after all of the registered animation callbacks have been called, rather than after each individual callback. It also allows the browser to throttle the number of animation callbacks that are called for tabs in the background.

There are a ton more details about requestAnimationFrame on Paul Irish’s blog, including how to wire it up for browsers that don’t support it yet so that you can start writing JavaScript animations that use requestAnimationFrame now.