Why do images and animations disappear when adding a class to the last column?

Question

I'm trying to animate 6 images in an infinite loop. When I add the 6th image and add the "poster" class, no image displays, but if I omit adding the "poster" class to the 6th column (or image), the first 5 images display and animate correctly. I don't understand why this happens. As you can see, the "poster" class is not in the sixth column, so my code works, but as soon as I add that class, it stops working. (I'm using bootstrap5 but I'm sure that has nothing to do with this issue because

P粉604848588 · Answer

In the sixth column, it works perfectly with class .poster, whether using Bootstrap 5 or not.

edit: You can add a poster with a hidden attribute at the end and it will work as long as the last poster does not contain class .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%;
}
}