David Baron's Weblog

I implemented the CSS Animations draft in Firefox. The patches implement all the features currently in the draft, but with moz prefixes, so we support the @-moz-keyframes at-rule, the -moz-animation property (and all its -moz-animation-* longhand subproperties), and the animationstart, animationend and animationiteration events. The list of properties that we support animating is the same as for transitions (and the same code is used to do the animation). I also added support for the newly-added step-start, step-end, and steps() values to -moz-transition-timing-function.

These patches landed in mozilla-central late last Tuesday (April 12), which means they made the pull for Firefox 5 and are now available on both the Nightly and Aurora channels. (See more information on channels.)

A few simple demos (view source for details; also, these may not syndicate well):

[Edit, 2011-04-19 18:35 -0700: I posted a not-very-well-captured video of the demos for those who don't want to update their browser just to look at them.]

Feedback I get over the next few weeks will determine whether this implementation is good enough to ship in Firefox 5, or whether it needs bug fixes before it can ship (hopefully in Firefox 6, if I get the feedback soon enough). So please download an Aurora build, try it out, and file bugs (product Core, component Style System) if you find problems. You'll also be on the aurora channel (our new channel between nightly and beta), and thus you'll be testing other new features that are moving towards release.

The worst problem I know of so far is a bug about the handling of properties that are only in some keyframes, caused because I didn't understand what the specification was trying to say. I'm hoping to get it fixed soon so that the fix can be in Firefox 6, but it's unlikely to be fixed for Firefox 5.

If you have strong opinions about whether that bug or other bugs should or should not prevent CSS Animations support from shipping in Firefox 5, let me know.