animation - css3 动画（逐帧）

Question

我的动画坏了，我不知道如何修复它-这是在浏览器中：http: //morxmedia.com/animation-test.html

我需要它顺利通过精灵表中的每个 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>

Answer 1

您对像素和缩放使用的技巧让我头疼。这是我将如何处理它：

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

如果您将持续时间更改为慢一点，您会发现抖动是由于您正在使用的动画精灵表中的一些缺陷造成的。