image - 帧完成时 CSS3 动画闪烁

Question

也许这是一个重复的问题，但我看了很多教程，但我的问题一直存在。我想制作一个正在移动的背景图像。我编写了代码，并从不同的教程中获得了它。但我的问题是:框架完成后，在显示图像之前我在屏幕上有一点点闪烁。我该如何解决这个问题问题，因为我想要一个非常平滑地从右向左移动的背景。让我告诉你，我只有一张图片，我只想用这一张做循环。图片的宽度比我的屏幕大。

代码:

#bg {
  width: 100%;
  height: 100%;
  background: url("assets/css/images/day.jpg") repeat-x;
  -webkit-animation: backgroundScroll 60s linear infinite;
  animation: backgroundScroll 60s linear infinite;
  background-position: 0px 0px;
  z-index: -2;
}
@-webkit-keyframes backgroundScroll {
  from {
    background-position: 0 0;
  }
  to {
    background-position: 100% 0;
  }
}
@keyframes backgroundScroll {
  from {
    background-position: 0 0;
  }
  to {
    background-position: 100% 0;
  }
}

<div id="bg">
</div>

Answer 1

div 的宽度应为背景图像宽度的 x 倍。其中 x 是一个整数。否则你将需要额外的计算

#bg1, #bg2, #bg3 {
  height: 41px;
  background: url("https://www.google.co.in/logos/doodles/2016/juno-reaches-jupiter-5164229872058368-res.png") repeat-x;
  -webkit-animation: backgroundScroll 5s linear infinite;
  animation: backgroundScroll 5s linear infinite;
  background-position: 0px 0px;
}


#bg1{
  width: 190px; // 2x width
}

#bg2{
  width: 285px; // 3x width
}

#bg3{
  width: 250px; // random width
}

@-webkit-keyframes backgroundScroll {
  from {
    background-position: 0px 0px;
  }
  to {
    background-position: 100% 0px;
  }
}

@keyframes backgroundScroll {
  from {
    background-position: 0px 0px;
  }
  to {
    background-position: 100% 0px;
  }
}

<div id="bg1">
</div>

<div id="bg2">
</div>
  
<br>
Wrong width
<div id="bg3">
</div>