如何製作響應式png序列？

Question

我在嘗試製作響應式png序列。

我試過的代碼在這裏。代碼有什麼問題？
1.如果我刪除背景大小：100％;它會顯示圖像，直到它不可見。
2.它不響應。 （如果我評論的背景尺寸：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

你有幾個錯誤......

這裏是你的代碼工作

.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>

它抖了一下，也許是原始圖像是不準確的，或者在這個尺寸的百分比可能工作有一定的舍入誤差;我不確定。