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

[css3-animations] Evenly spaced animation keyframes

From: Lea Verou <leaverou@gmail.com>
Date: Fri, 23 Sep 2011 03:06:01 +0300
Message-ID: <4E7BCD69.7070101@gmail.com>
To: www-style list <www-style@w3.org>
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 GMT

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