<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/sprite-steps.png" />
<div class="hi"></div>
.hi {
width: 50px;
height: 72px;
background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/sprite-steps.png");
animation: play 0.8s steps(10) infinite;
}
@keyframes play {
from {
background-position: 0px;
}
to {
background-position: -500px;
}
}
View Compiled
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.