W3C home > Mailing lists > Public > www-style@w3.org > July 2010

Re: CSS Animations: Actual frame based animating

From: Brendan Kenny <bckenny@gmail.com>
Date: Tue, 6 Jul 2010 09:20:18 -0500
Message-ID: <AANLkTilujE_tngpPIx7-0LgBpHR6wuB-YVmQnVqJrU35@mail.gmail.com>
To: Paul Bakaus <paul.bakaus@googlemail.com>
Cc: www-style@w3.org, public-fx@w3.org
There was a proposal a while back for adding "step" timing functions
to avoid that ugly bezier hack:


but they don't appear to have been added yet (to the current draft, at least).

I'm not sure about the syntax, but I think the keyframe selector you
suggest seems like a great idea even beyond sprite-like animations.
It's fairly common, regardless of timing function, to want to specify
an animation as a number of keyframes spread out evenly over the
duration of the animation. Having to adjust the percentages as one
adds or removes keyframes seems needless in that case.

I know the "to" and "from" keywords come from SMIL, but is there
something like a calcMode of "paced", but where the timing function
can still be arbitrary?

On Tue, Jul 6, 2010 at 3:40 AM, Paul Bakaus <paul.bakaus@googlemail.com> wrote:
> Hi,
> I've recently explored CSS Animations to a great extent, and it struck me
> that there's no way to do single frame based animating as it is. This means
> there's no current way to do Sprite animations, for instance, in pure CSS.
> There's a more than hacky solution to the problem, which would require the
> animation-easing-function to be more configurable so you can create an
> easing that is actually no curve anymore, so it "jumps" from one keyframe to
> another. However, I had a better idea to deal with non-keyframe animating:
> Instead of the current ruleset of from/to/PERCENTAGE in @keyframes, how
> about introducing a #{digit} syntax? This would allow for sprite animations
> such as the following:
> @keyframes driving-car {
>     #1 {
>         background-position-y: 0px;
>     }
>     #2 {
>         background-position-y: -100px;
>     }
>     #3 {
>         background-position-y: -200px;
>     }
>     #4 {
>         background-position-y: -300px;
>     }
> }
> It would probably make sense to change the wording "@keyframes" though to
> not be too confusing. It looks like a pretty simple change with a dramatic
> impact.
> What do you think?
> Thanks,
> Paul
> Paul Bakaus
> ---
> Dextrose AG
> --
> +49 (0)6131 275488
> --
> http://paulbakaus.com
> http://www.linkedin.com/in/paulbakaus
Received on Tuesday, 6 July 2010 14:20:53 UTC

This archive was generated by hypermail 2.4.0 : Friday, 25 March 2022 10:07:48 UTC