CSS无限水平滚动与关键帧？

Question

作为一名学生，我实际上正在制作我自己的作品集。

对于标题，我尝试创建一个天空效果，图像水平滚动。我使用CSS和关键帧，但我遇到的问题是，当图像结束时，它会“重置”，不能继续顺畅地滚动。

有没有办法让它“无限期”地持续下去？(我将持续时间更改为5s，只是为了不让您等待40s :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>

​