我正在尝试在一个无限循环中对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>