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; }
>  # }

I would expect this to be the same as the following:

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

Thus, the final frame doesn't change the 'left' property, so it stays the same as the last keyframe that did change it. Should work in reverse too, so that a missing property from the first keyframe takes on the same value as when it does show up.

> [skipping the part where I don't grok the relevance..]

> 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,

As this (interpolate missing values when values exist before and after the keyframes with the missing values)?

 # @keyframes one {
 #   from { top: 100px; left: 100px; }
 #   50%  { top: 200px; left: 150px; }
 #   to   { top: 100px; left: 300px; }
 # }

> 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; }
>  # }

That's a toughie. Perhaps interpolate the missing value first, and then apply the timing function? Like this:

 # @keyframes one {
 #   from { top: 100px; left: 100px; animation-timing-function: ease-out; }
 #   50%  { top: 200px; left: 150px; animation-timing-function: ease-in; }
 #   to   { top: 100px; left: 300px; }
 # }

That at least makes the math easy to understand, and the position predictable.