1

残念ながら、キーフレームの背景画像の変更をサポートしていない古い Webkit ブラウザー QT Webkit をターゲットにしています。そのため、12 フレームすべてを組み合わせたスプライトを作成しました。現在、アニメーションを作成するために、一定の間隔で各フレームを通過しようとしています。しかし、水平スプライトがあり、background-position-xキーフレーム % で変更しようとするとスライドします。

スプライト: http://i.imgur.com/krQPw.png

サンプル: http://jsbin.com/amoxef/1 (何が起こっているのかを確認するために、アニメーションの長さを長く設定しました。もともとは、アニメーション サイクル全体で 1 秒に設定したかったのです)。

次のフレーム (スプライトの位置) にスライドするのではなく、「ジャンプ」するようにするにはどうすればよいですか?

4

2 に答える 2

3

steps()CSS キーフレームのオプションを確認してください。

これは私がテストしていない例です...使用の単なるデモですsteps()...詳細はこちら: Making steps() with CSS animations .

#loader{
    border: 2px black solid;
    width: 800px;
    height: 480px;
    background: url('http://i.imgur.com/krQPw.png?1');
    background-position: 0px 0px;
    background-repeat: no-repeat;

    -webkit-animation: play .8s steps(10) infinite;
       -moz-animation: play .8s steps(10) infinite;
        -ms-animation: play .8s steps(10) infinite;
         -o-animation: play .8s steps(10) infinite;
            animation: play .8s steps(10) infinite;

}

@-webkit-keyframes play {
   from { background-position:    0px; }
     to { background-position: -8800px; }
}

@-moz-keyframes play {
   from { background-position:    0px; }
     to { background-position: -8800px; }
}

@-ms-keyframes play {
   from { background-position:    0px; }
     to { background-position: -8800px; }
}

@-o-keyframes play {
   from { background-position:    0px; }
     to { background-position: -8800px; }
}

@keyframes play {
   from { background-position:    0px; }
     to { background-position: -8800px; }
}
于 2013-01-06T02:46:08.103 に答える
1

ついにそれを手に入れました：http：//jsbin.com/amoxef/6

たとえば0％から7.999％まで同じ場所にとどまり、8％で変更されるように作成しましたbackground-position。したがって、実際の変更期間は非常に小さいため、次のフレームに「ジャンプ」し、次の定義された％フレームまでその期間に留まるように見えます。

于 2013-01-06T02:42:18.353 に答える