Question

我正在尝试制作一个动画css sprite响应。我有一个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

Answer 1

Animtion（在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);

对于精灵的即时速度。

（此解决方案无响应）

动画响应Css精灵

1 个答案: