Why does my css sprite look like an old movie?

Question

I can't figure out why my sprite is animating like an old film instead of changing background-position from one spot to the next. It transitions in a smooth scroll from left to right, which makes sense since I ask the position to change from left to right, but shouldn't it jump from one image to the next since I used steps()? Please help figure out what I did wrong:

#sprite {
background: url('img/example.png') no-repeat -4px -5px;
width: 43px;
height: 82px;

  -webkit-animation: dance .5s steps(4) infinite;
        animation: dance .5s steps(4) infinite;
}

@-webkit-keyframes dance {
0% { background: url('img/example.png') no-repeat -4px -5px; width: 43px; height: 82px; }
33% { background: url('img/example.png') no-repeat -52px -6px; width: 43px; height: 81px;}
66% { background: url('img/example.png') no-repeat -100px -7px; width: 43px; height: 80px;}
100% { background: url('img/example.png') no-repeat -148px -6px; width: 43px; height: 81px;}
}

@keyframes dance {
0% { background: url('img/example.png') no-repeat -4px -5px; width: 43px; height: 82px; }
33% { background: url('img/example.png') no-repeat -52px -6px; width: 43px; height: 81px;}
66% { background: url('img/example.png') no-repeat -100px -7px; width: 43px; height: 80px;}
100% { background: url('img/example.png') no-repeat -148px -6px; width: 43px; height: 81px;}
}

I'm really having trouble figuring it out and I'm pretty bad at explaining, so I thought maybe I could make a JSFiddle to show the difference of how it's animating in my version vs the example.

JS Fiddle

I would really appreciate any help you can offer. Please let me know if I can provide any additional info to help figure this out.

Thank you!

Answer 1

The timing function (in this case steps) , when you set an animation with multiple keyframes, applies to the transition between one keyframe and the next.

So, even if it seems strange, the CSS should be

#ryu {
    -webkit-animation: dance 8s steps(1) infinite;
    animation: dance 8s steps(1) infinite;
}

that is, with only one step

fiddle