CSS3 Keyframes animation stopmotion image shaking - css

Question

I am in desperate need of help.
What im trying to do is the same thing mozolla did to the homepage of firefox for their firefox OS. The flaming fox.
Heres the demo of it: http://davidwalsh.name/demo/firefox-animation.php
And here is my animation, notice the wobble. The frames are spaced evenly.
http://jsfiddle.net/vSXcr/
Any ideas?
.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

It wobbles because your total sprite width (13958px) does not evenly divide into the number of frames your animation is stepping through (32): 13958 / 32 = 436.1875. This will cause the stepped value during the animation interpolation to be rounded by the browser, which causes the wobble. This also means the location of your illustration varies between cells.
If you look at David's demo, you'll see his animation is smooth because it divides evenly: 6864 / 44 = 156
You'll need to space your frames out more so your total sprite width divides evenly into 32 frames: 32 * 437 = 13984. Pad your sprite so that its width is 13984px and your frames should be evenly spaced at 437px.