为何在给最末一栏添加类时图片和动画会消失？

Question

我正在尝试在一个无限循环中对6个图像进行动画。当我添加第6个图像并且添加“poster”类时，没有任何图像显示，但是如果我省略将“poster”类添加到第6列（或图像），前5个图像将正确显示和动画。我不明白为什么会发生这种情况。正如您所看到的，“poster”类不在第六列中，所以我的代码可以工作，但是一旦我添加了那个类，它就停止工作了。（我正在使用bootstrap5，但我确定这与此问题无关，因为

P粉604848588 · Answer

在第六列中，它与类.poster完美配合，无论是否使用Bootstrap 5。

编辑：您可以在末尾添加一个附带隐藏属性的海报，只要最后一个海报不包含类.poster，它就可以工作：）

@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%;
}
}