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关键帧修改为在图像的另一端结束。

裁剪图片：

工作原理

＆＃13;

＆＃13;

@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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

最终结果

＆＃13;

＆＃13;

@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;

}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;