CSS3动画：带步骤的背景位置-图像闪烁

我正在制作一个CSS3动画，一张桌子上有一盏闪烁的灯，使用一张只有两个不同精灵的精灵表。问题是，当使用“从”和“到”的百分比替代时，动画会导致整个图像闪烁，即使动画按其应该的方式运行

当我使用此选项时，效果很好：

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%;
   }
}

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

希望有人能帮我：）

试试：

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%;
   }
}

---

只是想说清楚一点。我想实现一个不一致的眨眼效果。因此，使用百分比而不是上面的百分比。如果您可以在codepen或JSFIDLE中显示您的代码，您应该发布更多的代码，这将非常有帮助。无论如何，我会尝试将时间函数中的步骤更改为1