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

Re: [css3-animations] Evenly spaced animation keyframes

From: ray whitfield <raylwhitfield@gmail.com>
Date: Tue, 27 Sep 2011 10:32:26 -0500
Message-ID: <CALVoEcfj8YG_C8zGrk6hDKYJ=ohUWKZVYfAMSDr3BedhLgO+Ow@mail.gmail.com>
To: www-style list <www-style@w3.org>
I would rather have the enumerated values as described here or time values
as suggested. Sometimes a frame may need to be presented a little longer
than others; however, almost all animations are set for every frame to be
displayed in a uniform, evenly space time sequence. I really don't see the
benefit of using a percentage.

- Ray

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


-- 
There are 10 kinds of people in the world:
those who know binary and those who don't.
Received on Tuesday, 27 September 2011 15:32:54 GMT

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