关于用雪碧图做动画并且自适应的问题

最近做了一个h5的小项目，里面涉及到的动画效果比较多，其中有一个就是用雪碧图加css3做动画。
一开始遇到的问题就是雪碧图必须得用绝对坐标去获取图片的位置，但是我们需要做到的是自适应不同的屏幕
针对这种情况，作出了以下的解决方案：
上面的图片是我需要实现效果的雪碧图，规格是1*5，一般我们需求填充到整个背景的时候是使用background-size:100% 100%;不过这也不是我们想要的。
那如果我们想要填充单个元素，我们可以按数量进行缩放：background-size:100% 500%，然后通过百分比去获取位置。
html:

<div class="circle">
  <div class="animation_wrap"></div>
</div>

css:

.circle{
  width: auto;
  height:auto;
  position: absolute;
  z-index:100;
  .animation_wrap{
    height:.4rem;
    width:.4rem;
    position:relative;
    z-index:99;
    overflow:hidden;
    transform:translate3d(-5px,-5px,0);
    animation-name:frames;
    animation-duration:1.5s;
    animation-timing-function:step-start;
    animation-delay:0s;
    animation-iteration-count:infinite;
    animation-direction:normal;
    animation-fill-mode:none;
    background-image:url(../images/spritesheet.png);
    background-size:100% 500%;
  }
}

@keyframes frames{
  0%{
    background-position:0% 0%;
  }
  20%{
    background-position:0% -100%;
  }
  40%{
    background-position:0% -200%;
  }
  60%{
    background-position:0% -300%;
  }
  80%{
    background-position:0% -400%;
  }
  100%{
    background-position:0% -500%;
  }
}