How to create a stepped animation from a strip?

Question

I'm animating an element background, using a strip - a set of image blocks in a single image - by using only css keyframes. But it doesn't work properly as I don't want the transitions to be linear but in steps:

http://jsbin.com/muyeguba/4/

I tried the "step-end" that shows more or less what I want to achieve. I'm currently reading docs ( http://www.w3.org/TR/css3-transitions/ ) and it seems this is possible, by creating the timing function ourselves ?

Is it possible ? or Would a JS solution be better ?

Answer 1

Here's my CSS for a loading animation from my site. Since you did not provide any images, I'll provide mine as an example.

Pay attention to the animate property. The synatx is as follows:

animation: name duration timing-function delay iteration-count direction;

In my case direction is omitted.

Image:

.loader {
    display: inline-block;
    width: 32px !important;
    height: 32px !important;
    background-image: url("loader.png");
    background-repeat: no-repeat;
    background-size: 2400px 32px;
    animation: play16 3.25s steps(75) infinite;
}
@keyframes play32 {
   from { background-position:    0px; }
     to { background-position: -2400px; }
}

In the steps(75), the number has to match the amount of 'frames' your sprite contains, otherwise the animation will cut off or some frames will repeat.

I use prefix-free to eliminate the need for vendor prefixes. You can either use this, or prefix the code manually.

Answer 2

So, I was doing it wrong:

.animate {
  background-image: url(image-strip-with-a-11-block);
  width: 53px;
  height: 78px;
  background-position: 0, 0;
  animation:play 1s infinite steps(10);
}

@keyframes play {
   0% { background-position:    0px; }
   25% { background-position: 100px, 0px; }
   50% { background-position: 200px, 0px; }
   75% { background-position: 300px, 0px; }
   100% { background-position: 400px, 0px; }
}

Should be instead:

.animate {
  background-image: url(image-strip-with-a-11-block);
  width: 53px;
  height: 78px;
  background-position: 0, 0;
  animation:play 1s infinite steps(10);
}

@keyframes play {
   from { background-position:    0px; }
     to { background-position: -500px; }
}