CSS3 Ключевые кадры анимации stopmotion image shaking

Question

Мне очень нужна помощь.

То, что я пытаюсь сделать, - это то же самое, что и mozolla на домашней странице firefox для их операционной системы firefox. Пылающая лиса.

Heres демонстрационная его: http://davidwalsh.name/demo/firefox-animation.php

А вот моя анимация, обратите внимание на раскачивание. Рамы распределены равномерно.

http://jsfiddle.net/vSXcr/

Любые идеи?

.bannerimg { 
background: url(http://beresponsive.net/tcex/img/ani3.png) repeat-x; 
width: 432px; 
height: 537px; 
animation: animate-kids 3s steps(32) infinite; 
-webkit-animation: animate-kids 3s steps(32) infinite; 
-moz-animation: animate-kids 3s steps(32) infinite; 
} 
@keyframes animate-kids { 
0% {background-position: 0 0; } 
100% {background-position: -13958px 0;} 
} 
@-webkit-keyframes animate-kids { 
0% {background-position: 0 0; } 
100% {background-position: -13958px 0;} 
} 
@-moz-keyframes animate-kids { 
0% {background-position: 0 0; } 
100% {background-position: -13958px 0;} 
} 

<div class="bannerimg"></div> 

Answer 1

Это качается, потому что ваша общая ширина спрайта (13958px) не равномерно разделить на число кадров вашей анимации пошаговая (32): 13958/32 = 436.1875. Это приведет к тому, что шаговое значение во время интерполяции анимации будет округлено браузером, что приведет к колебанию. Это также означает, что расположение вашей иллюстрации меняется между ячейками.

Если вы посмотрите на демо Дэвида, вы будете видеть его анимация гладкая, потому что она делит поровну: 6864/44 = 156

Вам нужно пространство ваши кадры из более Таким образом, общая ширина спрайта делится равномерно на 32 кадров: 32 * 437 = 13984. Поместите свой спрайт так, чтобы его ширина составляла 13984 пикселей, а ваши кадры должны быть равномерно распределены на 437 пикселей.