Stop Motion Animation

Question

I am creating a running cat stop motion animation. I already have all the slides. But this does not work properly:

div { animation: run 1s steps(10) infinite; -webkit-animation: run 1s steps(10) infinite; background: url(http://stash.rachelnabors.com/img/codepen/tuna_sprite.png) 0 0; background-repeat: no-repeat; height: 200px; width: 400px; } @keyframes run { 0% {background-position: 100% 0; } 100% {background-position: 100% -2591px; } } @-webkit-keyframes run { 0% {background-position: 100% 0; } 100% {background-position: 100% -2591px; } } 

 <div></div> 

Answer 1

In fact, you have 13 slides. So put steps(13)

 div { animation: run 1s steps(13) infinite; -webkit-animation: run 1s steps(13) infinite; background: url(http://stash.rachelnabors.com/img/codepen/tuna_sprite.png) 0 0; background-repeat: no-repeat; height: 200px; width: 400px; } @keyframes run { 0% {background-position: 100% 0; } 100% {background-position: 100% -2591px; } } @-webkit-keyframes run { 0% {background-position: 100% 0; } 100% {background-position: 100% -2591px; } } 

 <div></div>