Re: [css3-animations] Evenly spaced animation keyframes

On Fri, Sep 23, 2011 at 2:32 AM, Tab Atkins Jr. <jackalmage@gmail.com>wrote:

> 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
>
>
I believe Lea was referring to having the option to use <time> exclusively
on an animation, not mixing them within one animation.

This would allow you to add keyframes to the end of animation, and extend
the length of the animation at the same time. I guess the
"animation-duration" property could be used it override this length. Only if
it's omitted does the <time> keyframes reflect the actual time.

One problem with the "evenly spaced" proposal is that you'd have to adjust
the duration of each animation using it. I'd say adding keyframes in a
complex enough animation (to warrant this proposal) is typically going to
extend the duration as well.

One editing problem that isn't solved by the "evenly spaced" proposal, is
removal of keyframes. If you remove a keyframe that isn't last you still
have to update each one.

Another way to handle this is to declare the "relative duration" of each
transition in order of animation.

@keyframes rainbow {
    1 { background: red }
    3 { background: yellow }
    { background: red }
}

The animation from yellow to green would be three times as long as the rest.
So this is equivalent to:

@keyframes rainbow {
    0% { background: red }
    20% { background: yellow }
    80% { background: green }
    100% { background: red }
}

Of course this is even better with <time> values. Although I'm not sure it's
worth changing the syntax from exact time points to relative duration. You
could also allow the "animation-duration" property for each transition the
same way "animation-timing" is.