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

CSS Animations: Actual frame based animating

From: Paul Bakaus <paul.bakaus@googlemail.com>
Date: Tue, 6 Jul 2010 10:40:37 +0200
Message-ID: <AANLkTimweQakfOUGcRf__qxoWcAM7TkSKZxJ1sg9Fwu-@mail.gmail.com>
To: www-style@w3.org

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

What do you think?


Paul Bakaus
Dextrose AG
+49 (0)6131 275488
Received on Tuesday, 6 July 2010 13:33:02 UTC

This archive was generated by hypermail 2.4.0 : Monday, 23 January 2023 02:13:48 UTC