<div></div>
div {width: 225px; height: 400px;
background-image: url(https://estelle.github.io/10/files/sprite.png);
animation: gangham 4s steps(23,start) infinite,
movearound 12s steps(69,end) infinite alternate 44ms;
animation-direction: normal, alternate;
}
@keyframes gangham {
0% {background-position: 0 0}
100% {background-position: -5175px 0}
}
@keyframes movearound {
0% {transform: translatex(0)}
100% {transform: translatex(600px);}
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.