An image conveyor belt in CSS? - css

Question

I've been racking my brain on whether it's possible to have a div show a never-ending "conveyor belt" pattern that always goes in one direction.
You can take a div, tile a background image in one direction with repeat-x, then create a keyframe that moves the background-position by the width of one tile, which will bring the background to the same position where it was at the beginning of the transition.
What I can't figure out is how to "reset" the background-position, so that the cycle can run once again and create the illusion of continuous single-direction motion. Can this be done in CSS?
I could animate a gif and fake it that way, but they are rather large/slow to load & there is always a stutter during the loop.
Thanks!

Answer 1

Found something relevant on a website, after a brief search.
Sprites file:
Fiddle:
http://jsfiddle.net/CGmCe/8676/
Browser support: http://caniuse.com/#feat=css-animation
HTML:
<div class="hi"></div>
CSS:
.hi {
width: 50px;
height: 72px;
background-image: url("http://s.cdpn.io/79/sprite-steps.png");
-webkit-animation: play .8s steps(10) infinite;
-moz-animation: play .8s steps(10) infinite;
-ms-animation: play .8s steps(10) infinite;
-o-animation: play .8s steps(10) infinite;
animation: play .8s steps(10) infinite;
}
#-webkit-keyframes play {
from { background-position: 0px; }
to { background-position: -500px; }
}
#-moz-keyframes play {
from { background-position: 0px; }
to { background-position: -500px; }
}
#-ms-keyframes play {
from { background-position: 0px; }
to { background-position: -500px; }
}
#-o-keyframes play {
from { background-position: 0px; }
to { background-position: -500px; }
}
#keyframes play {
from { background-position: 0px; }
to { background-position: -500px; }
}