css3 animation (frame by frame) - animation

Question

My animation is broken and I can't figure how to fix it- here is it in browser: http://morxmedia.com/animation-test.html
I need it to smoothly go through each 150px X 150px block in the sprite sheet
Here's the code:
<style>
#loading {
background: transparent url(http://www.morxmedia.com/wp-content/themes/default/library/images/loading-animation.png) no-repeat 0px 0px;
background-size: 1px 9px;
width: 1px;
height: 1px;
-webkit-animation-name: loading;
-webkit-animation-duration: 1.3s;
-webkit-animation-iteration-count: infinite;
-webkit-transform: scaleX(150) scaleY(150);
-webkit-transform-origin: top left;
}
#-webkit-keyframes loading
{
0.000%
{
background-position: 0 -0px;
}
12.000%
{
background-position: 0 -1px;
}
24.000%
{
background-position: 0 -2px;
}
36.000%
{
background-position: 0 -3px;
}
48.000%
{
background-position: 0 -4px;
}
60.000%
{
background-position: 0 -5px;
}
72.000%
{
background-position: 0 -6px;
}
84.000%
{
background-position: 0 -7px;
}
96.000%
{
background-position: 0 -8px;
}
100.000%
{
background-position: 0 -9px;
}
}
</style>
<div id="loading"></div>

Answer 1

The trick you are using with pixels and scaling makes my head hurt. Here is how I would approach it:
<style>
#loading {
background: transparent url(http://www.morxmedia.com/wp-content/themes/default/library/images/loading-animation.png) no-repeat 0px 0px;
width: 150px;
height: 150px;
-webkit-animation-name: loading;
-webkit-animation-duration: 0.5s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
}
#-webkit-keyframes loading
{
0.000%
{
background-position: 0 -0px;
}
10.999%
{
background-position: 0 -0px;
}
11.000%
{
background-position: 0 -150px;
}
21.999%
{
background-position: 0 -150px;
}
22.000%
{
background-position: 0 -300px;
}
32.999%
{
background-position: 0 -300px;
}
33.000%
{
background-position: 0 -450px;
}
43.999%
{
background-position: 0 -450px;
}
44.000%
{
background-position: 0 -600px;
}
54.999%
{
background-position: 0 -600px;
}
55.000%
{
background-position: 0 -750px;
}
65.999%
{
background-position: 0 -750px;
}
66.000%
{
background-position: 0 -900px;
}
76.999%
{
background-position: 0 -900px;
}
77.000%
{
background-position: 0 -1050px;
}
87.999%
{
background-position: 0 -1050px;
}
88.000%
{
background-position: 0 -1200px;
}
100.000%
{
background-position: 0 -1200px;
}
}
</style>
<div id="loading"></div>
If you change the duration to be a bit slower, you'll see that the jitter is due to some imperfections in the animation sprite sheet you are using.