Question

如果选择的图像精灵不包含一行图像，如何为所有图像精灵设置动画？

**这里的一个例子有一行图像**

.hi {
    width: 50px;
    height: 72px;
    background-image: url("http://s.cdpn.io/79/sprite-steps.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://s.cdpn.io/79/sprite-steps.png" />
<div class="hi"></div>

现在这个例子包含不是一行的精灵图像。但包含3行精灵图像。你如何像上面的代码片段链接那样动画？我在显示它时使用jquery / javascript吗？请帮忙。

img {display: block;margin: auto;}

.sample {
    margin: 0 auto;
    width: 75px;
    height: 100px;
    background-image: url("https://fermmm.files.wordpress.com/2011/02/preview.jpg");
            animation: play 1s steps(4) infinite;
}
@keyframes play {
   from { background-position:    0px; }
     to { background-position: -299px; }
}

<img src="https://fermmm.files.wordpress.com/2011/02/preview.jpg" />

<div style="text-align:center;">Sprite image</div>
<div class="sample"></div>

Answer 1

创建两个单独的关键帧动画，水平移动4帧，垂直移动3帧。当一个方向动画正在播放时，另一个方向动画必须被冻结。

由于1s设置为经过4个水平帧，因此下一个垂直帧将在1s后开始，因此垂直方向的持续时间等于1s×3个垂直帧。

＆＃13;

img {
  display: block;
  margin: auto;
}

.sample {
  margin: 0 auto;
  width: 75px;
  height: 100px;
  background-image: url("https://fermmm.files.wordpress.com/2011/02/preview.jpg");
  animation: playh 1s steps(4) infinite, playv 3s steps(3) infinite;
}

@keyframes playv {
  0% { background-position-y: 0px; }
  100% { background-position-y: -301px; }
}

@keyframes playh {
  0% { background-position-x: 0px; }
  100% { background-position-x: -299px; }
}

＆＃13;

<img src="https://fermmm.files.wordpress.com/2011/02/preview.jpg" />

<div style="text-align:center;">Sprite image</div>
<div class="sample"></div>

＆＃13;

如何动画所有精灵图像？

1 个答案: