[animations] fill modes

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;

Default is "none", and the existing behaviour.

"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 "to" or 100% keyframe will continue to apply after the duration of the animation (until the animation style is removed).

"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.

Dean


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

Received on Tuesday, 19 January 2010 22:39:45 UTC