0

誰でもこのコードの変更を手伝ってもらえますかhttp://jsfiddle.net/simurai/CGmCe/ 

  .hi {
    width: 50px;
    height: 72px;
    background-image: url("http://files.simurai.com/misc/sprite.png");

    -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: -500px; }
}

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

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

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

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

<img src="http://files.simurai.com/misc/sprite.png" />
<div class="hi"></div>

アニメーションは最後の画像で停止しますが、まったく同じコード構造を持つ別のアニメーションを使用する場合、2 番目のアニメーションで停止する必要があるため、最初のアニメーションと 2 番目のアニメーションを流暢に再生し、最後の画像で停止することがより重要です。 2番目のアニメーションの。

4

1 に答える 1

0

アニメーションを一度再生infiniteするに1は、 、つまりanimation-iteration-countプロパティに置き換えます。

animation: play .8s steps(10) 1;

遅延を追加するには、animation-iteration-count属性の前に秒数を追加します。

animation: play .8s steps(10) 2s 1;

デモ: http://jsfiddle.net/CGmCe/4094/

于 2013-10-15T11:54:32.807 に答える