Re: CSS Animations: Actual frame based animating

On Tue, Jul 6, 2010 at 4:20 PM, Brendan Kenny <bckenny@gmail.com> wrote:

> There was a proposal a while back for adding "step" timing functions
> to avoid that ugly bezier hack:
>
> http://lists.w3.org/Archives/Public/www-style/2010Feb/0212.html
>
> 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.
>

Interesting, thanks for the info. I agree with you here – their proposal
would
work as well, but the problem remains that you have to adjust those
percentages over and over again. A simple linear frame list would be
very much appreciated.

BTW – you could also simply leave out the #, and have it be simple digits,
which would still not interfer with the current syntax in any way.


>
> 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
> > ---
> > CTO
> > Dextrose AG
> > --
> > +49 (0)6131 275488
> > --
> > http://paulbakaus.com
> > http://www.linkedin.com/in/paulbakaus
> >
>