Невозможно остановить анимацию на последнем кадре

Question

Я пытаюсь воспроизвести анимацию, прыгающую с символа, которую я хочу остановить на последнем кадре, но это не останавливается. Я пробовал использовать

animation-fill-mode: forwards;

без результата.

Ниже приведен код, я использую

.kia-jump { 
    width: 320px; 
    height: 464px; 
    position: absolute; 
    top: 1%; 
    left: 41%; 
    background: url('../images/activity/KiaJumpingAnimation.png') left center; 
    animation-fill-mode: forwards; 
    animation: jumpAnim 1.67s steps(24) 1; 
} 

@keyframes jumpAnim { 
    100% { background-position: -7920px; } 
} 

Вот ссылка на JSFiddle ->https://jsfiddle.net/k4rz5tdy/

Answer 1

Вы на самом деле есть один дополнительный шаг и как ваш background устанавливается как repeat по умолчанию , он просто возвращается к первому кадру в конце.

.kia-jump { 
    width: 320px; 
    height: 464px; 
    position: absolute; 
    top: 1%; 
    left: 41%; 
    background: url('http://schoolcinema-sconline.rhcloud.com/images/activity/KiaJumpingAnimation.png') left center; 
    animation: jumpAnim 1.67s steps(23) 1 forwards; 
} 

@keyframes jumpAnim { 
    100% { background-position: -7590px; } 
} 

Просто сделал

7920 - (7920/24) = 7590

https://jsfiddle.net/RedBreast/k4rz5tdy/2/