[CSS2 Animation] comma-separated values

Hello,

Reading the spec.

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’.


Example II has.

@keyframes wobble {
     0% { left: 100px; }
     40% { left: 150px; }
     60% { left: 75px; }
     100% { left: 100px; }
}

I don't see any comma-separated values above but under example I is this.

    keyframe-selectors: [ 'from' | 'to' | PERCENTAGE ] [ ',' [ 'from' | 
'to' | PERCENTAGE ] ]*;


Does this mean that 'wobble, roll' is possible as seen below?

@keyframes wobble, roll {
     0% { left: 100px; }
     40% { left: 150px; }
     60% { left: 75px; }
     100% { left: 100px; }
}

If so, an example would be good.


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.


I now somewhat follow this,

   none | forwards | backwards | both [, none | forwards | backwards | 
both]*

Which  has ','  indicating a comma-separated value, but this may not be 
understood by an author.


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

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

Received on Sunday, 30 January 2011 04:33:33 UTC