Question

我正在制作带有闪烁灯的桌面的CSS3动画，使用只有两个不同精灵的spritesheet。问题是，动画使用百分比而不是来自＆＃34;来自＆＃34;和＆＃34;到＆＃34;导致整个图像闪烁，即使动画按原样运行。

我使用它时工作正常：

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

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

1 个答案: