[animations] fill modes, revised

This is a proposed addition to the CSS Animations draft:
<http://dev.w3.org/csswg/css3-animations/>

I propose a new property for CSS animations to control the execution of the animation before and after its explicit start and end times. This is equivalent to what SMIL calls "fill" [1].

Note that SMIL doesn't do backwards fill (before the animation starts) and uses different keywords. I think the ones below make more sense.


animation-fill-mode:  none | forwards | backwards | both;

The 'animation-fill-mode' property defines whether the effects of an animation are apparent before the animation starts, and after it ends. It has the effect of logically extending the first keyframe back in time, and/or extending the final keyframe forwards in time.

The default is "none", and the existing behavior.

"backwards" means that the "from" or 0% keyframe will apply before the animation starts (i.e. the time between when the animation style is applied and the beginning of the animation, which might be delayed by "animation-delay").

"forwards" means that the last keyframe that was applied will continue to apply after the final iteration of the animation (until the animation style is removed). The last keyframe to be applied is the 'to' or '100%' keyframe, unless the animation has animation-direction set to 'alternate' and a finite and even iteration count, in which case the 'from', or '0%' keyframe is the one whose rules will be applied for the forwards fill.

"both" means that the animation will extend both back and forward.

Without fill modes, writing purely declarative animations can be a huge pain. You either need to use script, or somehow tweak your keyframes make a huge duration (which is annoying to change if you want to change parameters). It's a very common component of animations and we should have included it from the first proposal.

Simon

[1] http://www.w3.org/TR/SMIL2/smil-timing.html#Timing-fillAttribute

Received on Tuesday, 2 March 2010 17:49:56 UTC