0

私のアニメーションは壊れていて、それを修正する方法がわかりません-これがブラウザにあります：http：//morxmedia.com/animation-test.html

スプライトシートの各150pxX150pxブロックをスムーズに通過するために必要です

コードは次のとおりです。

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

1 に答える 1

2

ピクセルとスケーリングで使用しているトリックは、私の頭を傷つけます。これが私がそれにアプローチする方法です：

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

継続時間を少し遅く変更すると、使用しているアニメーションスプライトシートの欠陥が原因でジッターが発生していることがわかります。

于 2012-05-05T20:03:46.020 に答える