W3C home > Mailing lists > Public > www-style@w3.org > March 2010

Re: [animations] fill modes, revised

From: Tab Atkins Jr. <jackalmage@gmail.com>
Date: Tue, 2 Mar 2010 12:20:32 -0600
Message-ID: <dd0fbad1003021020m39206a3eg3d01ef665572832b@mail.gmail.com>
To: Simon Fraser <smfr@me.com>
Cc: "www-style@w3.org list" <www-style@w3.org>
On Tue, Mar 2, 2010 at 11:49 AM, Simon Fraser <smfr@me.com> wrote:
>
> 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

I like the forwards fill, and agree that it sounds necessary.

It appears that backwards fill is just a convenience, and could be
approximated by baking the delay into the first keyframe?  I'm just
making sure I understand it correctly.

~TJ
Received on Tuesday, 2 March 2010 18:21:20 GMT

This archive was generated by hypermail 2.3.1 : Tuesday, 26 March 2013 17:20:25 GMT