Re: [css3-animations] multiple 'animation-name' and cascading

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:
>>> (Alternatively, I suppose one could check for whether the property
>>> is specified in any keyframe -- though that's a bit more work.)
>> 
>> 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.

Simon

Received on Tuesday, 12 April 2011 18:34:39 UTC