Re: [css3-animations] Evenly spaced animation keyframes

On 23/09/2011 10:32 AM, Tab Atkins Jr. wrote:
> On Thu, Sep 22, 2011 at 5:06 PM, Lea Verou<leaverou@gmail.com>  wrote:
>> I was thinking, we could do something similar for animation keyframes, by
>> allowing numbers to be specified instead of percentages. For example the
>> above animation could become:
>>
>> @keyframes rainbow {
>>     from, to { background: red }
>>     2 { background: yellow }
>>     3 { background: green }
>>     4 { background: aqua }
>>     5 { background: blue }
>>     6 { background: fuchsia }
>> }
>>
>> #animation-demo { animation: 30s rainbow infinite; }
>
> That's a pretty interesting suggestion.  What would happen for missing
> numbers?  Do they just get skipped over?  (In other words, do we just
> use the numbers for ordering?)

I would hope so.

> Can this be used to allow evenly-spacing keyframes between any two
> keyframes, or only between the from/to keyframes?

Good question.

> Do you have more examples of where this would be useful?
>
>
>> And while we're at it, perhaps it might be useful to allow<time>  values as
>> well, in the same way that<length>  values are allowed in color-stop
>> positions.
>
> Probably not a great idea, for the same reason using both px and % in
> color-stop positions isn't a great idea - it's too easy to have the
> keyframes accidentally change their ordering.  Unlike color-stops,
> keyframes don't have a canonical source ordering to help with fixup.
>
> ~TJ


As Sebastian has stated in another reply, I think Lea is talking about 
time periods. Something like the below:

@keyframes rainbow {
     0s, 25s { background: red }
     4s { background: yellow }
     8s { background: green }
     13s { background: aqua }
     16s { background: blue }
     21s { background: fuchsia }
}


I have proposed using time period in April this year.

http://lists.w3.org/Archives/Public/www-style/2011Apr/0698.html


-- 
Alan Gresley
http://css-3d.org/
http://css-class.com/

Received on Wednesday, 28 September 2011 09:28:41 UTC