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.

You wouldn’t add it to your website if you are using jQuery animations. jQuery manages the render loop for the animations so you don’t have to, so you are not writing the code that would be optimized by requestAnimationFrame. When/If the api is finalized or stable enough, jQuery could be updated to utilize it, which should yield smoother animations in browsers that support it.

Technically, someone could (and maybe did) patch jQuery to add support for requestAnimationFrame, but it’s still a really new API (only available in nightly builds, and no formal API), so really it would be for experimentation purposes.