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 correctly and animation.

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 bootstrap 5 but I'm sure this has nothing to do with this issue as the code as I show it replicates the issue perfectly)

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