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: Tue, 27 Sep 2011 11:20:30 +0300
Message-ID: <4E81874E.2060304@gmail.com>
To: Chris Marrin <cmarrin@apple.com>
CC: www-style list <www-style@w3.org>
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)
Received on Tuesday, 27 September 2011 08:21:06 GMT

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