动画响应Css精灵

我正在尝试使一个动画css精灵响应。 我有一个div，它的背景是从样式表加载的图像，它每0.5秒改变一次，所以它会移动。问题是，如果浏览器调整了大小，我想动态地更改这个div及其backgorund的大小。 我在这里读到过很多解决方案，但都很管用

我现在拥有的是

**HTML**

<div class="atomic"></div>

**CSS**

.atomic {
  position: absolute;
  width: 628px;
  height: 231px;
  background-image: url("../img/atomic.png");
}

.blinking-atomic {
    -webkit-animation: blinking-atomic steps(4) 3s infinite;
    animation: blinking-atomic steps(4) 3s infinite;
}

@-webkit-keyframes blinking-atomic {
  from {
    background-position: 0 -231px;

  }
  to {
    background-position: 133.4% -231px;
  }
}

**JSON** (i'm using angular so i load some values from a json file to my css) 

 "class": "atomic blinking-atomic",
      "colocar" :
      {
        "fondo_height" : 1920,
        "fondo_width" : 1020,
        "left": 25,
        "top": 17,
        "width": 628,
        "height": 231,
        "z-index":99 

      }

我尝试过很多解决方案，但都没有成功。我甚至读到不可能使动画css精灵响应。 有什么想法吗？我是否应该忘记动态地执行它，并在css中创建标准的@media标记

TY在chrome和firefox中测试

动画可以用css完成。只是要把所有的财产都弄对有点棘手

    -webkit-animation-timing-function: steps(1, end);
    -moz-animation-timing-function: steps(1, end);
    -ms-animation-timing-function: steps(1, end);
    -o-animation-timing-function: steps(1, end);
    animation-timing-function: steps(1, end);

为精灵们的瞬间喷吐

---

此解决方案没有响应能力

我想说这是可以做到的，所有背景图像的大小都必须相同，并且div的纵横比在所有屏幕大小下都必须保持不变。然后，您可以将div的背景大小设置为完全包含并使用百分比作为背景位置谢谢，我已经尝试过了，但没有结果：来自@edouardkomboat的解决方案对我有效。您需要更改任何显示x%的内容，因为我使用的是svg文件，所以完全可以使图像响应。这真的很难。