Animation css3动画（逐帧）

我的动画已损坏，我无法确定如何修复它-浏览器中有：

我需要它平滑地通过精灵表中的每个150px X 150px块

代码如下：

<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>

#装载{
背景：透明url(http://www.morxmedia.com/wp-content/themes/default/library/images/loading-animation.png)无重复0px 0px；
背景尺寸：1px9px；
宽度：1px；
高度：1px；
-webkit动画名称：加载；
-webkit动画持续时间：1.3s；
-webkit动画迭代计数：无限；
-webkit转换：scaleX（150）scaleY（150）；
-webkit变换原点：左上角；
}
@-webkit关键帧加载
{
0.000%
{
背景位置：0-0px；
}
12.000%
{
背景位置：0-1px；
}
24.000%
{
背景位置：0-2px；
}
36.000%
{
背景位置：0-3px；
}
48.000%
{
背景位置：0-4px；
}
60.000%
{
背景位置：0-5px；
}
72.000%
{
背景位置：0-6px；
}
84.000%
{
背景位置：0-7px；
}
96.000%
{
背景位置：0-8px；
}
100.000%
{
背景位置：0-9px；
}
}

你使用的像素和缩放技巧让我头疼。以下是我的做法：

<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>

#装载{
背景：透明url(http://www.morxmedia.com/wp-content/themes/default/library/images/loading-animation.png)无重复0px 0px；
宽度：150px；
高度：150像素；
-webkit动画名称：加载；
-webkit动画持续时间：0.5s；
-webkit动画迭代计数：无限；
-webkit动画计时功能：线性；
}
@-webkit关键帧加载
{
0.000%
{
背景位置：0-0px；
}
10.999%
{
背景位置：0-0px；
}
11.000%
{
背景位置：0-150px；
}
21.999%
{
背景位置：0-150px；
}
22.000%
{
背景位置：0-300px；
}
32.999%
{
背景位置：0-300px；
}
33.000%
{
背景位置：0-450px；
}
43.999%
{
背景位置：0-450px；
}
44.000%
{
背景位置：0-600px；
}
54.999%
{
背景位置：0-600px；
}
55.000%
{
背景位置：0-750px；
}
65.999%
{
背景位置：0-750px；
}
66.000%
{
背景位置：0-900px；
}
76.999%
{
背景位置：0-900px；
}
77.000%
{
背景位置：0-1050px；
}
87.999%
{
背景位置：0-1050px；
}
88.000%
{
背景位置：0-1200px；
}
100.000%
{
背景位置：0-1200px；
}
}

---

如果将持续时间更改为稍慢一点，您将看到抖动是由于所使用的动画精灵表中的某些缺陷造成的。

谢谢！你是对的——我在背景位置上需要做很多调整；）。999%的人帮了我。我制作了两帧动画，从0-49%50-100%，有时会有一种奇怪的放松，但0-49.999%50-100%成功了：）