CSS Animations: Actual frame based animating

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