Dừng hoạt ảnh chuyển động CSS

Question

Tôi đang tạo hoạt ảnh dừng chuyển động của một con mèo đang chạy. Tôi đã sẵn sàng tất cả các trang trình bày. Nhưng nó dường như không hoạt động đúng:

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

Trên thực tế bạn có 13 slide. Vì vậy, đặt 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>