CSS：滚动幻灯片不重复

Question

我有一个很长的图像，我想用滚动效果在屏幕上滑动，就像在apple tv的网页上一样（浮动/滚动电影封面）：

这是我使用的标记：

<div class="header">
        <div class="slider">

        </div>
    </div>

这是css：

    .header{
    height: 610px;
    width: 100%;
    overflow-y: scroll;
    overflow-x: hidden;
}

.header .slider{
    height: 540px;
    background: url("../images/header.jpg");
    position: relative;
    border-left: 10px rgb(34,34,34) solid;
    border-bottom: 10px rgb(34,34,34) solid;
    border-right: 10px rgb(34,34,34) solid;
    left: 0;
    top: 60px;
    width: 450%;
    animation: moveSlideshow 40s linear infinite;
    -webkit-animation: moveSlideshow 40s linear infinite;
    -moz-animation: moveSlideshow 40s linear infinite;
    transform: translate3d(0, 0, 0);
    -webkit-transform: translate3d(0, 0, 0);
    -moz-transform: translate3d(0, 0, 0);

}

这是css动画：

@keyframes moveSlideshow {
100% {
    -webkit-transform: translateX(-300%);
}

}

幻灯片显示滚动但只有一次，并且在整个图像滚动后很快滚出屏幕（并且还有一部分开头！）..

图像是：

请帮助

Answer 1

你的意思是这样吗？

@keyframes slide-banner {
  0%   {background-position: 0 0;}
  100% {background-position: -300px 0;}
}
@-webkit-keyframes slide-banner {
  0%   {background-position: 0 0;}
  100% {background-position: -300px 0;}
}
@-o-keyframes slide-banner {
  0%   {background-position: 0 0;}
  100% {background-position: -300px 0;}
}
@-moz-keyframes slide-banner {
  0%   {background-position: 0 0;}
  100% {background-position: -300px 0;}
}
.slide-banner {display: block; width:100%; height:100px; animation: slide-banner 2s infinite linear; -webkit-animation: slide-banner 2s infinite linear; -ms-animation: slide-banner 2s infinite linear; -moz-animation: slide-banner 2s infinite linear; -o-animation: slide-banner 2s infinite linear;}

<div class="slide-banner" style="background-image: url(http://www.javatpoint.com/images/javascript/javascript_logo.png);background-repeat: repeat;"></div>

Answer 2

我不熟悉你引用的苹果电视效果，但是如果你想让它反复循环，你需要在translateX（0）的基础上添加额外的@ 0％关键帧;然后在@ 100％translateX（）;

中使用图像的宽度

因此，如果您拥有2000px图像，您的动画将如下所示：

@keyframes moveSlideshow {
  0% {
      transform: translateX(0);
  }
  100% {
    transform: translateX(-2000px);
  }
}

这是笔：http://codepen.io/NeilWkz/pen/wWMzwe （！注意：我打开了自动前缀，因为你的代码被除掉了所有东西而不是chrome！）