Safari CSS 动画仅在高度较大时重复闪烁

Question

我试图让图像永远滑过，就像选框一样。在 Safari 中，动画重复时会出现白色闪烁，但仅限于图像高度值较大时。试试这个代码片段。如果您将

height

更改为较小的值（或者使用不同的浏览器），闪光灯就会消失。

我在网站上使用的实际图像是 215×80 渐变，作为背景拉伸到整个屏幕。

.image-bg {
  height: 10000px;
  animation: bg-slide 2s linear infinite;
  background-image: url(https://picsum.photos/215/80);
  background-position: center;
  background-repeat: repeat;
  background-size: 50%;
  width: 300%;
  
}

@keyframes bg-slide {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }  
}

<div class="image-bg"></div>

Answer 1

通过动画

background-position

来修复（并由于某种原因将值加倍）

.image-bg {
  height: 10000px;
  animation: bg-slide 2s linear infinite;
  background-image: url(https://picsum.photos/215/80);
  background-repeat: repeat;
  background-size: 50%;
  width: 400%;
}

@keyframes bg-slide {
  from { background-position: 0%; }
  to { background-position: -100%; }  
}

<div class="image-bg"></div>