css - CSS:滚动背景

我一直使用this site作为页面的模板，但是更改背景图像时遇到困难。我只是重新创建了jsFiddle的背景。当前的背景有效，因为顶部只有一种颜色，侧面使图像看起来像是连续的。

以下是相关的CSS代码：

0% {
    -moz-transform: translate3d(0, 0, 0);
    -webkit-transform: translate3d(0, 0, 0);
    -o-transform: translate3d(0, 0, 0);
    -ms-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
}
100% {
    -moz-transform: translate3d(-2250px, 0, 0);
    -webkit-transform: translate3d(-2250px, 0, 0);
    -o-transform: translate3d(-2250px, 0, 0);
    -ms-transform: translate3d(-2250px, 0, 0);
    transform: translate3d(-2250px, 0, 0);
}

有没有一种方法可以使背景向右滚动，到达终点后又向左滚动？使图像滚动时很难使其看起来“连续”。

最佳答案

实际上，通过利用right CSS属性，该功能几乎与我的第一个脚本相同。

.wrapper {
  width: 100%;
  height: 400px;
  text-align: right;
  overflow: hidden;
}
.marquee {
  -webkit-animation: rightLeft 20s linear infinite;
  height: 100%;
  display: block;
  position: relative;
}
@-webkit-keyframes rightLeft {
  0% {
    right: 0;
  }
  50% {
    right: 80%;
  }
  100% {
    right: 0;
  }
}

<div class="wrapper">
  <img class="marquee" src="http://html5up.net/uploads/demos/aerial/css/images/bg.jpg" />
</div>