Re: [css3-animations] Evenly spaced animation keyframes

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