CSS 带关键帧的无限水平滚动？

Question

作为一名学生，我实际上是在制作自己的作品集。
对于页眉，我尝试创建天空效果，图像水平滚动。我使用了 CSS 和关键帧，我遇到的问题是当图像结束时，它会“重置”并且不会继续平滑滚动。
有什么办法让它“无限期”地继续下去吗？（我将持续时间更改为 5 秒只是为了不让您等待 40 秒 :p）

@keyframes animatedBackground {
  from { background-position: 0 0; }
  to { background-position: 100% 0; }
}
#header-top {
  height: 190px;
  background-image: url('http://image.noelshack.com/fichiers/2016/46/1479595480-clouds.png');
  background-repeat: repeat-x;
  animation: animatedBackground 5s linear infinite;
  line-height: 400px;

}

<div id="header-top">
</div>

Answer 1

我刚刚裁剪了您的图片，所以结尾与开头对齐。然后，我修改了 animatedBackground 关键帧以在图像的另一端结束。

裁剪图像：

工作原理

@keyframes animatedBackground {
  from {
    left: 0px;
  }
  90% {
    left: -562px;
  }
  100%{left: 0px;}
}
#header-top {
  height: 190px;
  width: 562px;
  overflow-x: auto;
  overflow-y: hidden;
}
* {
  margin: 0;
  padding: 0;
  font-family:sans-serif;
}
.inner-cont {
  width: 1126px;
  position: relative;
  animation: animatedBackground 4s linear infinite;
}
img{
  border-right:1px solid black;
  box-sizing:border-box;
}

<div id="header-top">
  <div class='inner-cont'>
    <img src="https://archive.org/download/clouds-tiled/clouds-tiled.png" /><img src="https://archive.org/download/clouds-tiled/clouds-tiled.png" />
  </div>
</div>
<h3>^ How it actually works(almost) ^</h3>
<h4>The spinback doesn't actually get animated, but it happens <br/>(The line separates the looped images from each other)</h4>

最终结果

@keyframes animatedBackground {
  from { background-position: 0px 0; }
  to { background-position: -562px 0; }
}
#header-top {
  height: 190px;
  width:100%;
  background-image: url('https://archive.org/download/clouds-tiled/clouds-tiled.png');
  background-repeat: repeat-x;
  animation: animatedBackground 2s linear infinite;
  line-height: 400px;

}

<div id="header-top">
    </div>

CSS 带关键帧的无限水平滚动？

CSS infinite horizontal scroll with keyframe?

css

keyframe

css-animations