Re: [css3-animations] Evenly spaced animation keyframes

On Thu, Sep 22, 2011 at 5:06 PM, Lea Verou <leaverou@gmail.com> wrote:
> 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; }

That's a pretty interesting suggestion.  What would happen for missing
numbers?  Do they just get skipped over?  (In other words, do we just
use the numbers for ordering?)

Can this be used to allow evenly-spacing keyframes between any two
keyframes, or only between the from/to keyframes?

Do you have more examples of where this would be useful?


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

Probably not a great idea, for the same reason using both px and % in
color-stop positions isn't a great idea - it's too easy to have the
keyframes accidentally change their ordering.  Unlike color-stops,
keyframes don't have a canonical source ordering to help with fixup.

~TJ

Received on Friday, 23 September 2011 00:33:43 UTC