How to make responsive png sequence? - html

Question

I am trying make responsive png sequences.
My tried code is here. What is wrong with code?
1. if i removed background-size :100%; it shows image until and unless it is invisible.
2. It is not responsive. (if i comment background-size :100%)
CSS
.eye {
position: relative;
width: 70%;
margin: -10% auto 0 auto; /* positioning tweak */
}
.pngseq{
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
background: url('http://arnoculus.com/img/eye-sprite.png') no-repeat 0 0%;
background-size: 100%;
animation: play 3s steps(58) infinite;
}
#-webkit-keyframes play {
from { background-position: 0px; }
to { background-position: -30740px; }
}
#-moz-keyframes play {
from { background-position: 0px; }
to { background-position: -30740px; }
}
#-ms-keyframes play {
from { background-position: 0px; }
to { background-position: -30740px; }
}
#-o-keyframes play {
from { background-position: 0px; }
to { background-position: -30740px; }
}
#keyframes play {
from { background-position: 0px; }
to { background-position: -30740px; }
}
HTML
<div class="eye">
<div class="pngseq">
</div>
</div>
JSFIDDLE

Answer 1

You have several mistakes...
Here is your code working
.eye {
position: relative;
width: 70%;
height: 800px;
background-color: red;
margin: -10% auto 0 auto; /* positioning tweak */
}
.pngseq{
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
background: url('http://arnoculus.com/img/eye-sprite.png') no-repeat 0 0%;
background-size: 5800%;
animation: play 3s steps(57) infinite;
}
#keyframes play {
from { background-position: 0px 0px; }
to { background-position: 100% 0px; }
}
<div class="eye">
<div class="pngseq">
</div>
</div>
It is shaking a bit, maybe the original image isn't accurate, or maybe working with percentages at this sizes has some rounding error; I don't know for sure.