W3C home > Mailing lists > Public > www-style@w3.org > April 2011

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

From: Simon Fraser <smfr@me.com>
Date: Tue, 12 Apr 2011 11:33:38 -0700
Cc: "Tab Atkins Jr." <jackalmage@gmail.com>, Dean Jackson <dino@apple.com>, www-style@w3.org
Message-id: <FF85ECE7-EE1A-440B-8AFB-497E02BCEFD8@me.com>
To: "L. David Baron" <dbaron@dbaron.org>

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 GMT

This archive was generated by hypermail 2.3.1 : Tuesday, 26 March 2013 17:20:39 GMT