CSS3 sprite animation for different size - html

Question

I'm trying to do css3 animation with sprite sheet for different sizes. Full image size is working fine but it's not working as expected for other sizes(in my case half of the image size). It's shifting.
Here is working code with actual image size
/* ----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; }
}
So, now i tried with half of the image size(4960/2= 2480) with below code
(not only half of the image size, need different size. I tried half of the image size)
/* 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; }
}
Also, can I use everything as percentage value so that it will work as responsive. I tried background-position: -4960px; into background-position: 100% 0; but unsuccessful.
Here is jsfiddle

Answer 1

This should work. Completely responsive:
.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>

Answer 2

Duplicate your image and half the size.
Remove background-size from the button1 class.
HTML:
<div class="button">
<a href="#" class="spriteBtn" ></a>
</div>
<br/>
<div class="button1">
<a href="#" class="spriteBtn2" ></a>
</div>
CSS:
/* ----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; }
}
/* button1 */
.button1 {
width: 250px;
height: 225px;
background: url("http://s21.postimg.org/66xjk6391/vz_EZHwu.png");
/* background-size: 2480px auto; */
}
.button1:hover{
animation: play1 3s steps(10) infinite;
}
#keyframes play1 {
from { background-position: 0px; }
to { background-position: -2480px; }
}
JSFiddle