无限滚动图片库 (CSS) 中的滞后

Question

我正在尝试基于this 代码（学分）制作一个无限滚动的图片库。 出于某种原因，最后一张图片滚动后会有延迟（应该显示的第一张图片直到最后一张图片消失后 5 秒才会出现），我不知道为什么。 我想知道出了什么问题以及如何解决这个问题（让第一张图片在滚动后立即出现在最后一张图片旁边。）

CSS 代码如下所示：

* {margin: 0; padding: 0;} 
body {
    background: url('dark_geometric.png');
}
#container {
    width: 1000px;
    overflow: hidden;
    margin: 50px auto;
    background: white;
}
/*photobanner*/
.photobanner {
    height: 233px;
    width: 3550px;
    margin-bottom: 80px;
}
.first {
    -webkit-animation: bannermove 30s linear infinite;
       -moz-animation: bannermove 30s linear infinite;
        -ms-animation: bannermove 30s linear infinite;
         -o-animation: bannermove 30s linear infinite;
            animation: bannermove 30s linear infinite;
}
@keyframes "bannermove" {
 0% {
    margin-left: 0px;
 }
 100% {
    margin-left: -2125px;
 }
}
@-moz-keyframes bannermove {
 0% {
   margin-left: 0px;
 }
 100% {
   margin-left: -2125px;
 }
}
@-webkit-keyframes "bannermove" {
 0% {
   margin-left: 0px;
 }
 100% {
   margin-left: -2125px;
 }
}
@-ms-keyframes "bannermove" {
 0% {
   margin-left: 0px;
 }
 100% {
   margin-left: -2125px;
 }
}
@-o-keyframes "bannermove" {
 0% {
   margin-left: 0px;
 }
 100% {
   margin-left: -2125px;
 }
}
.photobanner {
    height: 233px;
    width: 3550px;
    margin-bottom: 80px;
    font-size: 0
}
.photobanner img {
    width: 200px;
    height: 200px;
    margin-right: 5px;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    -ms-transition: all 0.5s ease;
    transition: all 0.5s ease;
}
.photobanner img:hover {
    -webkit-transform: scale(1.1);
    -moz-transform: scale(1.1);
    -o-transform: scale(1.1);
    -ms-transform: scale(1.1);
    transform: scale(1.1);
    cursor: pointer;
    -webkit-box-shadow: 0px 3px 5px rgba(0,0,0,0.2);
    -moz-box-shadow: 0px 3px 5px rgba(0,0,0,0.2);
    box-shadow: 0px 3px 5px rgba(0,0,0,0.2);
}
img {
    width: 200px;
    height: 200px;
}
li {
    display: inline;
}

下面是一些 HTML 代码：

<div id="container">
    <div class="photobanner">
        <ul id="scroller">
          <li><img class="first" src="/artsu/001.jpg" alt="" /></li>
          <li><img src="/artsu/002.jpg" alt="" /></li>
          <li><img src="/artsu/003.jpg" alt="" /></li>
        </ul>
    </div>
</div>

我添加到 CSS 中的唯一东西是底部的 img 标签（保持 img 大小一致）和 li 标签（使图像水平）。

Answer 1

您的代码运行良好，只是您需要将标签的class 分配从img（即.first）更改为分配给first li tag，这使您的animation 有效。

但您需要 calculate 和 timing 才能获得预期的输出。

* {
   margin: 0;
   padding: 0;
}
body {
   background: url('dark_geometric.png');
   overflow: hidden;
}
#container {
  width: 1000px;
  overflow: hidden;
  margin: 50px auto;
  background: white;
}
 /*photobanner*/

 .photobanner {
   height: 233px;
   width: 1100px;
   margin-bottom: 80px;
 }

 ul > li {
   display: inline-block;
 }

 li.first {
   -webkit-animation: bannermove 8s linear infinite;
   -moz-animation: bannermove 8s linear infinite;
   -ms-animation: bannermove 8s linear infinite;
   -o-animation: bannermove 8s linear infinite;
   animation: bannermove 8s linear infinite;
 }

 @keyframes bannermove {
   0% {
     margin-left: 0px;
   }
   100% {
     margin-left: -450px;
   }
 }

<div id="container">

  <div class="photobanner">
    <ul id="scroller">
      <li class="first"><img src="http://via.placeholder.com/350x150/111/fff" alt="" /></li>
      <li><img src="http://via.placeholder.com/350x150/f33/111" alt="" /></li>
      <li><img src="http://via.placeholder.com/350x150/2f2/111" alt="" /></li>
    </ul>
  </div>
</div>