W3C home > Mailing lists > Public > www-style@w3.org > December 2009

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

From: Brad Kemper <brad.kemper@gmail.com>
Date: Tue, 22 Dec 2009 09:52:22 -0800
Cc: www-style@w3.org
Message-Id: <06556B2F-D012-48DE-8363-C9A0D38C19DA@gmail.com>
To: L. David Baron <dbaron@dbaron.org>

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.

Received on Tuesday, 22 December 2009 17:53:03 GMT

This archive was generated by hypermail 2.2.0+W3C-0.50 : Tuesday, 22 May 2012 03:47:12 GMT