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>

所以动画在最后一张图片上停止，但更重要的是，如果我应该使用另一个具有完全相同代码结构的动画，它必须在第二个动画处停止，所以它可以流畅地播放第一个动画和第二个动画并在最后一张图片上停止第二部动画。

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