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

pnwntuvh  于 4个月前  发布在  Flink
关注(0)|答案(1)|浏览(73)

我正在尝试让一个图像永远滑过,就像一个大帐篷一样。在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%); }  
}

个字符

os8fio9y

os8fio9y1#

通过动画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%; }  
}

个字符

相关问题