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

Re: [css3-animations] Evenly spaced animation keyframes

From: Lea Verou <leaverou@gmail.com>
Date: Fri, 23 Sep 2011 10:18:32 +0300
Message-ID: <4E7C32C8.7050406@gmail.com>
To: "L. David Baron" <dbaron@dbaron.org>
CC: www-style list <www-style@w3.org>
On 23/9/11 03:29, L. David Baron wrote:
> On Friday 2011-09-23 03:06 +0300, Lea Verou 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 }
>> }
> It seems reasonable, but I don't like the idea of mixing the numbers
> with 'from' and 'to' (which are defined to be 0% and 100%).  It
> seems like you're assuming that the author wanted the same space
> between '6' and 'to' as between '5' and '6' -- but it's not clear to
> me why that's a good assumption (especially if the other values
> aren't evenly spaced).  In other words, I think this would make
> sense:
>
> @keyframes rainbow {
>      1, 7 { background: red }
>      2 { background: yellow }
>      3 { background: green }
>      4 { background: aqua }
>      5 { background: blue }
>      6 { background: fuchsia }
> }
>
> Do you assume that the lowest number is the start and the highest
> number is the end (my preference) -- or should there be anything
> special about 0 or 1?
>
>
> I think it probably doesn't make sense to allow mixing of different
> scales (percents / numbers / times) within the same keyframes rule,
> especially if times are ever involved.  I think this largely because
> keyframes don't cascade (though I wish they did), which means that
> changing between times that are the same and times that are very
> slightly apart will yield very different results (since it changes
> whether one keyframe wipes out the other or not).
>
> -David
>
I was more thinking about it along the lines of: The numbers get 
resolved to percentages on parse time. The maximum number defined is == 
100% and 1 (or 0) is equal to 0%. from, to retain their definition as 0% 
and 100% respectively. So, the way I had it in mind, mixing both would 
be acceptable. Omitting numbers also wouldn't be a problem.
The problem with that is that if you only want to evenly space a couple 
of keyframes and not the whole thing, it's not possible. That's quite 
important, as animations can be quite complex, and start with something 
defined explicitly in percentages, then go over to a couple of evenly 
spaced keyframes and then move on to something else. I can't think of a 
way to solve this right now, so I'm hoping someone else can.

By the way, fwiw, I agree that they should cascade.

As for <time>s, I've never needed them, so I don't have a more complete 
proposal in my mind. I just mentioned them, in case someone else finds 
them useful and suggests use cases. Otherwise, they're just unnecessary 
complexity.

-- 
Lea Verou (http://leaverou.me | @LeaVerou)
Received on Friday, 23 September 2011 07:19:12 GMT

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