CSS3 动画 : Background-position with steps - image blinks

Question

我正在使用仅包含两个不同 sprite 的 spritesheet 制作带有闪烁灯的 table 的 CSS3 动画。问题是，当动画使用百分比而不是“from”和“to”时，会导致整个图像闪烁，即使动画按预期运行也是如此。

当我使用它时它工作正常:

background: url("../img/desk.svg");
background-size: auto 200%;
background-repeat: no-repeat;
background-position: 0 0;
-webkit-animation: desk 5s steps(2) infinite;

@-webkit-keyframes {
   from {
      background-position: 0 0;
   }
   to {
      background-position: 0 200%;
   }
}

但是当使用这个时，图像会闪烁。动画本身可以正常工作:

@-webkit-keyframes desk {
   0% {
       background-position: 0 0%;
   }
   10% {
       background-position: 0 200%;
   }
   15% {
       background-position: 0 0%;
   }
   20% {
       background-position: 0 200%;
   }
   25% {
       background-position: 0 0%;
   }
   100% {
       background-position: 0 200%;
   }
}

我不知道为什么会发生这种情况，因为我使用的是 spritesheet，而且图像不必每次都加载。

希望有人能帮助我:)

Answer 1

尝试:

background: url("../img/desk.svg");
background-size: auto 200%;
background-repeat: no-repeat;
background-position: 0 0;
-webkit-animation: desk 5s steps(2) infinite;

@-webkit-keyframes desk{
   from {
      background-position: 0 0;
   }
   to {
      background-position: 0 200%;
   }
}