javascript - 背景动画流畅循环

Question

我正在尝试添加一个背景动画，该动画将从右向左移动并干净地循环。到目前为止，动画使用关键帧从右到左运行，但 30 秒后它会停止并重新开始。它看起来不是很干净和光滑。有没有其他解决方案？

body:before {
 content: ' ';
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  opacity: 0.5;
  background-image: url("/media/background.svg");
  background-position: 0px;
  background-repeat: repeat-x;
  background-size: cover;
  animation-name: slide;
  animation-duration: 30s;
  animation-iteration-count: infinite;
}
@keyframes slide {
  0% { background-position: 0 0; }
  100% { background-position: -4000px 0; }
}

Answer 1

将50%关键帧更改为100%关键帧，并将结束背景位置设置为-100vw。

body:before {
  content: ' ';
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  opacity: 0.5;
  background-image: url("https://picsum.photos/1200/1200");
  background-position: 0px;
  background-repeat: repeat-x;
  background-size: cover;
  animation-name: slide;
  animation-duration: 10s;
  animation-iteration-count: infinite;
}

@keyframes slide {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: -100vw 0;
  }
}

与animation-timing-function: Linear相同的想法:

body:before {
  content: ' ';
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  opacity: 0.5;
  background-image: url("https://picsum.photos/1200/1200");
  background-position: 0px;
  background-repeat: repeat-x;
  background-size: cover;
  animation-name: slide;
  animation-duration: 10s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}

@keyframes slide {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: -100vw 0;
  }
}