[css3-animations] Evenly spaced animation keyframes

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 }
}

#animation-demo { animation: 30s rainbow infinite; }

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.

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

Received on Friday, 23 September 2011 00:06:41 UTC