html - 不同大小的CSS3 Sprite 动画

Question

我正在尝试使用不同尺寸的 Sprite 表制作 css3 动画。完整的图像尺寸工作正常，但对于其他尺寸(在我的情况下是图像尺寸的一半)，它没有按预期工作。它在变化。

这是具有实际图像大小的工作代码

/* ----button------ */
.button {
    width: 491px;
    height: 451px;
    background: url("http://i.imgur.com/vzEZHwu.png");
    background-size: auto 100%;


}
.button:hover{
       animation: play 3s steps(10) infinite;
  }

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

所以，现在我用下面的代码尝试了一半的图像大小(4960/2=2480)(不只是图片大小的一半，需要不同的尺寸。我试过图片大小的一半)

/* button1 */
.button1 {
    width: 250px;
    height: 225px;
    background: url("http://i.imgur.com/vzEZHwu.png");
    /* background-size: 2480px auto; */ ---this one works 
    background-size: auto 100%; ----here is the problem, image is shifting


}
.button1:hover{
       animation: play1 3s steps(10) infinite;
  }

@keyframes play1 {
   from { background-position:    0px; }
     to { background-position: -2480px; }
}

此外，我能否将所有内容都用作百分比值，以便它可以响应式工作。我尝试将 background-position: -4960px; 设置为 background-position: 100% 0; 但没有成功。

这里是 jsfiddle

Answer 1

这应该有效。完全响应:

.button {
    width: 25%;
    background: url("http://i.imgur.com/vzEZHwu.png");
    background-size: 1000% auto;
}
.button:before {
    content: "";
    display: block;
    padding-top: 90%;
}
.button:hover{
       animation: play 3s steps(10) infinite;
  }

@keyframes play {
   from { background-position:     0% 0; }
     to { background-position: -1000% 0; }
}

<div class="button">
    <a href="#" class="spriteBtn" ></a>
</div>