Stop Motion Animation CSS

Question

Sto creando un'animazione stop-motion di un gatto in esecuzione. Ho già tutte le diapositive pronte. Ma non sembra funzionare correttamente:

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 realtà si hanno 13 diapositive. Così si può mettere 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>