Stop Motion Animation CSS

Question

Ich erstelle eine Stop-Motion-Animation einer laufenden Katze. Ich habe schon alle Folien fertig. Aber es scheint nicht richtig zu funktionieren:

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

Eigentlich haben Sie 13 Dias. So setzen 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>