html - 无限滚动图片库 (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 标签，这样您的动画就可以工作了。

但是需要计算时间以获得预期输出的是您。

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