CSS-анимация спрайтов не работает должным образом ⇐ CSS

[Anonymous]

я использую этот код:

Код: Выделить всё

.doodle {
width: 700px;
height: 280px;
background: url('../images/sprite-ronaldo_sprite-juggling.jpg');
animation: doodle 2s steps(17) forwards;
animation-iteration-count: 1;
}

@keyframes doodle {
0% {background-position: 0 0;}
100% {background-position: 0 -3827px;}
}

со спрайтом, созданным самостоятельно, но он прокручивается и не показывает изображение 1 к 1. Это изображение спрайта. Кто-нибудь знает, как я могу это исправить?
введите здесь описание изображения
Я уже многое изменил, но ничего не работает

Подробнее здесь: https://stackoverflow.com/questions/783 ... s-intended