[css3-animations] non-animatable values of animatable properties

On Tuesday 2011-04-12 11:33 -0700, Simon Fraser wrote:
> On Apr 12, 2011, at 10:29 AM, L. David Baron wrote:
> > On Tuesday 2011-04-12 08:56 -0700, Tab Atkins Jr. wrote:
> >> On Mon, Apr 11, 2011 at 9:09 PM, L. David Baron <dbaron@dbaron.org> wrote:
> >> You need to check all the keyframes.  Given a keyframe like this:
> >> 
> >> @keyframes wobble {
> >>   0% { left: 0; top: 0; }
> >>  33% { top: 100px; }
> >>  67% { top: -100px; }
> >> 100% { left: 100px; top: 0; }
> >> }
> >> 
> >> In the middle third of the animation, the nearest keyframe blocks
> >> don't have any mention of 'left', but 'left' is still being animated.
> > 
> > The spec should perhaps mention that somewhere.
> 
> Agreed :)
> 
> > Additionally, it should say how that behavior interacts with timing
> > functions specified in keyframes.
> 
> In this case left animates exactly as if the middle two keyframes were missing:
> 
> @keyframes wobble {
>   0% { left: 0; top: 0; }
> 100% { left: 100px; top: 0; }
> }
> 
> If the first keyframe had a timing-function, then that's the one that would apply.
> 
> In other words, properties are interpolated between the keyframes that specify them.

One more question about this behavior (which I don't see the spec
answering):  when some of the adjacent pairs of values of a property
aren't animatable, what happens?  All the spec says about
non-animatable situations is:
  # Properties that are unable to be animated are ignored in these
  # rules, with the exception of animation-timing-function', the
  # behavior of which is described below. 
  -- http://dev.w3.org/csswg/css3-animations/#keyframes

For example, how is the following animated?

@keyframes fade {
  0% { fill: black }
  30% { fill: rgb(64, 64, 64); }
  70% { fill: url(foo.svg#gradient1) }
  100% { fill: white; }
}

Is there only an animation for 'fill' between 0% and 30%, or does
something else happen after 30%?

(With the way I previously interpreted the spec, it seemed
relatively obvious:  the property isn't animated between pairs of
keyframes that can't be animated (e.g., after 30% in the example
above).  But with the model as you've explained it, now I'm less
sure.)

-David

-- 
L. David Baron                                 http://dbaron.org/
Mozilla Corporation                       http://www.mozilla.com/

Received on Saturday, 16 April 2011 15:24:55 UTC