David Baron's Weblog

Changes to handling of @-moz-keyframes

Saturday, 2011-04-23, 22:22 -0700

In Firefox builds on the Nightly channel, starting with those of Saturday 2011-04-23, I've made some substantive changes to the way @-moz-keyframes rules work.

Basically, two things have changed. The first is the handling of properties that aren't present in all keyframes. When a property that's part of an animation is only present for some of the keyframe selectors, the old code treated it as the "inherited" value. We still do that for 0% and 100% keyframes. However, for others, we animate the property as though that keyframe isn't present. In other words, if you have:

@-moz-keyframes {
  0% { top: 0px; left: 0px }
  30% { top: 50px }
  70% { left: 50px }
  100% { top: 100px; left: 100% }
}

you'll now get an animation where top animates using the 0%, 30%, and 100% keyframes, and left animates using the 0%, 70%, and 100% keyframes.

The second thing that's changed is the handling of values that can't be interpolated, such as auto values for many properties. Previously, this caused us to drop only some segments between keyframes; now we drop the property completely from the animation.

For more details, see the bug and the code (though the diff there isn't particularly easy to read; it makes more sense to look at the code before and after).

And, of course, file any bugs in product Core, component Style System.

[Update, 2011-04-27 12:25 -0700: This landed on Aurora on April 27, so it should be in Aurora channel builds starting on Thursday, April 28.]