html - 如何制作响应式png序列？

Question

我正在尝试制作响应式 png 序列。

我试过的代码在这里。代码有什么问题？
1. 如果我删除了 background-size :100%;它显示图像直到并且除非它不可见。
2. react 迟钝。 (如果我评论背景大小: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>

它有点晃动，可能是原始图像不准确，或者在此尺寸下使用百分比可能有一些舍入误差；我不确定。