I am trying to animate in an infinite loop 6 images.
When I add the 6th image and if I add the "poster" class, none of the images are displayed, 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.
CSS
@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%;
}
}
HTML
<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>
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 working with bootstrap 5 but I’m sure it has nothing to do with this problemo, since the code, as I present it, replicates the problem perfectly)
2
Answers
I added the poster class to the sixth column here on CodePen and it appears to work. Only thing different is the image source and set a width on the image (as I don’t have your source images)
Only real change to your provided code is in the HTML
<div class="col poster-6">
changed to<div class="col poster poster-6">
It is working perfectly with the class
.poster
in the sixth column and with or without Bootstrap 5.