David Baron's Weblog

CSS Animations, part 2

Saturday, 2011-06-15, 11:27 -0700

A few months ago, I wrote about landing support for CSS animations in Firefox. I want to say a little more about how CSS animations are useful.

First, they make it easy for authors to write many simple animations. Authors can create animations using a few lines of CSS.

Second, the animations animate well, even under some machine load. In contrast with the most primitive techniques of animation with JavaScript (though not the more advanced ones), they behave well when the machine can't draw every frame, by delaying or skipping frames as appropriate rather than delaying the entire animation. This makes the animation appear smoother.

Third, they provide the browser with more opportunities to make the animation faster and more efficient (consume less processing time and use less power). Today, Firefox reduces the frequency of updates for animations that are happening in a background tab (which means we know the user isn't looking at the page), and we have the potential for doing similar things for obscured windows in the future. Likewise, each step of the animation with CSS animations is today more efficient than an equivalent animation done using JavaScript, and we can improve that efficiency difference in the future.