為何在為最末一欄新增類別時圖片和動畫會消失？

Question

我正在嘗試在一個無限循環中對6個圖像進行動畫。

當我新增第6個圖片並且新增「poster」類別時，沒有任何圖片顯示，但如果我省略將「poster」類別新增至第6列（或影像），則前5個影像將正確顯示和動畫。

我不明白為什麼會發生這種情況。

正如您所看到的，「poster」類別不在第六列中，所以我的程式碼可以工作，但是一旦我添加了那個類，它就停止工作了。

（我正在使用bootstrap 5，但我確定這與此問題無關，因為程式碼如我所示，完美地複製了這個問題）

@keyframes moves {
  to {
    background-position: -100vw 80%;
  }
}

.galeria {
  position: relative;
  overflow: hidden;
}

.poster {
  position: absolute;
  animation: moveAcross 6s linear infinite;
}
.poster-1 {
  animation-delay: -0s;
  animation-duration: 6s;
}
.poster-2 {
  animation-delay: -1s;
  animation-duration: 6s;
}
.poster-3 {
  animation-delay: -2s;
  animation-duration: 6s;
}
.poster-4 {
  animation-delay: -3s;
  animation-duration: 6s;
}
.poster-5 {
  animation-delay: -4s;
  animation-duration: 6s;
}
.poster-6 {
  animation-delay: -5s;
  animation-duration: 6s;
}

@keyframes moveAcross {
  0% {
    left: -300px;
  }
  100% {
    left: 110%;
  }
}

<div class="row justify-content-center">
    <div class="galeria">
        <div class="col poster poster-1">
            <img src="images/posters/poster1.jpg" class="img-fluid" />
        </div>
        <div class="col poster poster-2 ">
            <img src="images/posters/poster2.jpg" class="img-fluid" />
        </div>
        <div class="col poster poster-3">
            <img src="images/posters/poster3.jpg" class="img-fluid" />
        </div>
        <div class="col poster poster-4 ">
            <img src="images/posters/poster4.jpg" class="img-fluid" />
        </div>
        <div class="col poster poster-5">
            <img src="images/posters/poster5.jpg" class="img-fluid" />
        </div>
        <div class="col poster-6">
            <img src="images/posters/poster6.jpg" class="img-fluid" />
        </div>
    </div>
</div>

Answer 1

在第六列中，它與類別.poster完美配合，無論是否使用Bootstrap 5。

編輯： 您可以在末尾添加一個附帶隱藏屬性的海報，只要最後一個海報不包含類別.poster，它就可以工作：）

<div style="visibility: hidden;">
    <img src="https://soft.com.mx/test/images/posters/poster6.jpg" class="img-fluid" />
</div>

@keyframes moves {
to {
    background-position: -100vw 80%;
}
}

.galería {
position: relative;
overflow: hidden;
}

.poster {
position: absolute;
animation: moveAcross 6s linear infinite;
}
.poster-1 {
animation-delay: -0s;
animation-duration: 6s;
}
.poster-2 {
animation-delay: -1s;
animation-duration: 6s;
}
.poster-3 {
animation-delay: -2s;
animation-duration: 6s;
}
.poster-4 {
animation-delay: -3s;
animation-duration: 6s;
}
.poster-5 {
animation-delay: -4s;
animation-duration: 6s;
}
.poster-6 {
animation-delay: -5s;
animation-duration: 6s;
}

@keyframes moveAcross {
0% {
    left: -300px;
}
100% {
    left: 110%;
}
}

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">

<div class="row justify-content-center">
    <div class="galeria">
        <div class="col poster poster-1">
            <img src="https://picsum.photos/300/300?random=1" class="img-fluid" />
        </div>
        <div class="col poster poster-2 ">
            <img src="https://picsum.photos/300/300?random=2" class="img-fluid" />
        </div>
        <div class="col poster poster-3">
            <img src="https://picsum.photos/300/300?random=3" class="img-fluid" />
        </div>
        <div class="col poster poster-4 ">
            <img src="https://picsum.photos/300/300?random=4" class="img-fluid" />
        </div>
        <div class="col poster poster-5">
            <img src="https://picsum.photos/300/300?random=5" class="img-fluid" />
        </div>
        <div class="col poster poster-6">
            <img src="https://picsum.photos/300/300?random=6" class="img-fluid" />
        </div>
    </div>
</div>