Re: [CSS3 Animation] comma-separated values

Corrected subject line to [CSS3 Animation].

On 30/01/2011 3:57 PM, Simon Fraser wrote:
> On Jan 29, 2011, at 8:31 pm, Alan Gresley wrote:
>
>>
>> http://dev.w3.org/csswg/css3-animations/
>>
>> I see in 3 (Keyframes) this text (emphases added).
>>
>>   | The keyframe selector for a keyframe style rule consists of a
>>   | *comma-separated* list of percentage values or the keywords
>>   | ‘from’ or ‘to’.
>>
>>
>
> No, the "keyframe selector" refers to the "from", "to" or percentage values. So you can say this:
>
> @keyframes wobble {
>    from { left: 0px; }
>    25%, 50% { left: 100px; }
>    75%, to { left: 200px; }
> }


Ah, thank you Simon. So in affect, this,

@keyframes wobble {
   from { left: 0px; }
   25%, 50% { left: 100px; }
   75%, to { left: 200px; }
}

is shorthand for this.

@keyframes wobble {
   from { left: 0px; }
   25% { left: 100px; }
   50% { left: 100px; }
   75%, to { left: 200px; }
}

An example would classify this comma-separated scenario.


>> The properties, 'animation-name', 'animation-duration', 'animation-timing-function', 'animation-iteration-count', 'animation-direction', 'animation-play-state', 'animation-delay', 'animation-fill-mode', 'animation' (shorthand) all allow comma-separated values but none of the prose in each section specifies this.
>
> Commas are used in these properties when multiple animations are specified (just like
> the background-image properties, for example).
>
> Simon


I am aware of this, I have already used something like this in one 
online demo.

   -webkit-animation: roll 2s infinite linear, grow2 10s infinite linear;


Would the spec writers for CSS3 animation welcome my assistance with 
examples at a later date?



-- 
Alan http://css-class.com/

Armies Cannot Stop An Idea Whose Time Has Come. - Victor Hugo

Received on Sunday, 30 January 2011 06:24:25 UTC