無限スクロール画像ギャラリー（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; 
} 

そして、底に

<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タグ（水平方向の画像を作るために）：ここでのHTMLコードのビットです。

Answer 1

あなたのコードが正常に動作している、それはあなたがfirst li tagに、これはあなたのanimation作品を作ることを割り当てるにimg（すなわち、.first）からタグのclass割り当てを変更する必要があるということだけです。

calculatetimingの出力が期待されるのはあなたです。

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