My goal is to create a continuous animation loop with 6 images.
However, when I try to add the 6th image and include the "poster" class, none of the images appear on the screen. If I skip adding the "poster" class to the 6th image, the first 5 images display and animate as intended.
I'm puzzled by this behavior and not sure why it's happening.
In the code provided below, you can see that the "poster" class is excluded from the sixth column, which makes the code work properly. But as soon as I apply that class, the animation stops functioning.
(Please note that I am using bootstrap 5, but the issue at hand seems unrelated to the framework since the problem persists even without it)
@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>