Re: [css3-animations] What if different keyframes have different sets of properties?

On Dec 17, 2009, at 1:18 PM, L. David Baron wrote:

> I can't find anything in http://dev.w3.org/csswg/css3-animations/
> that says what to do when different keyframes have different sets of
> properties.  For example, how would an implementation handle:
>  # @keyframes one {
>  #   from { top: 100px; left: 100px; }
>  #   50%  { top: 200px; left: 125px; }
>  #   to   { top: 100px; }
>  # }
> What happens to 'left' once the animation is more than 50% complete?
> Does left animate at all in this animation?  Whatever the spec says
> about this, it's also worth considering how it interacts with the
> statement in the "Animation behavior" section:
>  # In the case of multiple animations specifying behavior for the
>  # same property, the animation defined last will override the
>  # previously defined animations. 
> 
> Furthermore, is it even allowed to do something like this:
>  # @keyframes one {
>  #   from { top: 100px; left: 100px; }
>  #   50%  { top: 200px; }
>  #   to   { top: 100px; left: 300px; }
>  # }
> It seems relatively obvious how one *could* handle this, but I'd
> have no idea how 'left' would animate in this case:
>  # @keyframes one {
>  #   from { top: 100px; left: 100px; animation-timing-function: ease-out; }
>  #   50%  { top: 200px;              animation-timing-function: ease-in; }
>  #   to   { top: 100px; left: 300px; }
>  # }

What WebKit does currently is to use the unanimating value of a property
in keyframes where that property is not specified.

So for a div with this style:

div {
  position: absolute;
  left: 25px;
  top: 25px;
};

these keyframes:

@keyframes one {
  from {  }
  50%  { left: 50px; top: 50px; }
  to   { left: 100px; }
}

would be equivalent to these keyframes for this element:

@keyframes one {
  from { left: 25px; top: 25px;  }
  50%  { left: 50px; top: 50px; }
  to   { left: 100px; top: 25px; }
}

We see value in using the unanimated value of the property to replace
missing values, because it allows the author to use keyframes to animate
something to and from where it is now. I think this is more useful than using
'forward fill' logic.

Simon

Received on Tuesday, 22 December 2009 19:00:44 UTC