CodePen

HTML

            
              <div></div>
            
          
!
via HTML Inspector

CSS

            
              div {width: 225px; height: 400px;
  background-image: url(http://estelle.github.com/10/files/sprite.png);
  -webkit-animation: gangham 4s steps(23,start) infinite,
    movearound 12s steps(69,end) infinite 44ms;
  animation: gangham 4s steps(23,start) infinite,
    movearound 12s steps(69,end) infinite alternate 44ms;
  -webkit-animation-direction: normal, alternate;
  animation-direction: normal, alternate;
}
@-webkit-keyframes gangham {
  0% {background-position: 0 0}
  100% {background-position: -5175px 0}
}
@keyframes gangham {
  0% {background-position: 0 0}
  100% {background-position: -5175px 0}
}
@-webkit-keyframes movearound {
  0% {-webkit-transform: translatex(0)}
  100% {-webkit-transform: translatex(600px);}
}

@keyframes movearound {
  0% {transform: translatex(0)}
  100% {transform: translatex(600px);}
}
            
          
!
? ?
? ?
Must be a valid URL.
+ add another resource
via CSS Lint

JS

            
              
            
          
!
Must be a valid URL.
+ add another resource
via JS Hint
Loading ..................