Re: [css3-animations] Evenly spaced animation keyframes

On 26/9/11 20:11, Chris Marrin wrote:
>
> On Sep 22, 2011, at 5:06 PM, Lea Verou wrote:
>
>> Every time I've had to create an animation, I've had to count the 
>> keyframes and divide 100% by that number. If I add another keyframe, 
>> all percentages have to be recalculated. See this one for example 
>> (from http://leaverou.me/csss/#animation-demo ):
>>
>> @keyframes rainbow {
>>    from, to { background: red }
>>    16% { background: yellow }
>>    33% { background: green }
>>    50% { background: aqua }
>>    66% { background: blue }
>>    83% { background: fuchsia }
>> }
>>
>> #animation-demo { animation: 30s rainbow infinite; }
>>
>> We solved this problem for gradient color stops, by allowing color 
>> stops without a percentage. These color stops just evenly divide the 
>> space that's available.
>>
>> 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 }
>> }
>
> If feels like we'd have to come up with a lot of rules about missing 
> numbers, mixed numbers and percentages, etc. Maybe it would be better 
> to simply omit the numbers? Then the rule could simply be that an 
> omitted percentage value takes a value that is evenly spaced between 
> the previous and next percentage value. It would allow:
>
> from { }
> { }
> { }
> 50% { }
> { }
> { }
> to { }
>
> Now you'd have keyframes at 0%, 16.7%, 33.3%, 50%, 66.7%, 83.3% and 
> 100%. If there are no percentage values the first and last would be 0 
> and 100% and the rest would space out evenly. Of course the simple 
> rule doesn't handle out-of-order percentages, and I'm not sure what to 
> do about that. But I like this better because, in the simple case of 
> increasing percentages, the syntax is less confusing. And it allows 
> for a more obvious combination of rules with and without percentages.
>
> -----
> ~Chris
> cmarrin@apple.com <mailto:cmarrin@apple.com>
>
>
>
>
I see a few problems with that approach:
- Inconsistent syntax, both with the rest of the keyframes and with the 
rest of CSS in general.
- The order in which keyframes are declared doesn't currently matter. 
With this change, it will start to.
- Keyframes can't be combined. For example, if you want the 4th and 6th 
keyframe to be the same, you will have to redefine them or use percentages.

-- 
Lea Verou (http://leaverou.me | @LeaVerou)