Pourquoi les images et animations disparaissent lors de l'ajout d'une classe dans la dernière colonne ?

Question

J'essaie d'animer 6 images dans une boucle infinie.

Lorsque j'ajoute la 6ème image et la classe "poster", aucune image n'apparaît, mais si j'omet d'ajouter la classe "poster" à la 6ème colonne (ou image), les 5 premières images s'affichent correctement et animation.

Je ne comprends pas pourquoi cela se produit.

Comme vous pouvez le voir, la classe "poster" n'est pas dans la sixième colonne, donc mon code fonctionne, mais dès que j'ajoute cette classe, il cesse de fonctionner.

(j'utilise bootstrap 5 mais je suis sûr que cela n'a rien à voir avec ce problème car le code tel que je le montre reproduit parfaitement le problème)

@keyframes se déplace {
  à {
    position d'arrière-plan : -100vw 80 % ;
  }
}

.galerie {
  position : relative ;
  débordement caché;
}

.affiche {
  position : absolue ;
  animation : moveAcross 6s linéaire infini ;
}
.affiche-1 {
  délai d'animation : -0s ;
  durée de l'animation : 6 s ;
}
.affiche-2 {
  délai d'animation : -1 s ;
  durée de l'animation : 6 s ;
}
.affiche-3 {
  délai d'animation : -2 s ;
  durée de l'animation : 6 s ;
}
.affiche-4 {
  délai d'animation : -3 s ;
  durée de l'animation : 6 s ;
}
.affiche-5 {
  délai d'animation : -4 s ;
  durée de l'animation : 6 s ;
}
.affiche-6 {
  délai d'animation : -5 s ;
  durée de l'animation : 6 s ;
}

@keyframes moveAcross {
  0% {
    gauche : -300px ;
  }
  100 % {
    gauche : 110 % ;
  }
}</pré>
<pre class="brush:html;toolbar:false;"><div class="row justifier-content-center">
    <div class="galerie">
        <div class="col poster poster-1">
            <img src="images/posters/poster1.jpg" class="img-fluid" />
        </div>
        <div class="affiche col affiche-2 ">
            <img src="images/posters/poster2.jpg" class="img-fluid" />
        </div>
        <div class="col affiche affiche-3">
            <img src="images/posters/poster3.jpg" class="img-fluid" />
        </div>
        <div class="affiche col affiche-4 ">
            <img src="images/posters/poster4.jpg" class="img-fluid" />
        </div>
        <div class="col affiche affiche-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>

Answer 1

Dans la sixième colonne, cela fonctionne parfaitement avec la classe .poster, que vous utilisiez Bootstrap 5 ou non.

Modifier : Vous pouvez ajouter une affiche avec des propriétés cachées à la fin et cela fonctionnera tant que la dernière affiche ne contient pas de classe .poster :)

<div style="visibility: hidden;">
    <img src="https://soft.com.mx/test/images/posters/poster6.jpg" class="img-fluid" />
</div>

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

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">

<div class="row justify-content-center">
    <div class="galeria">
        <div class="col poster poster-1">
            <img src="https://picsum.photos/300/300?random=1" class="img-fluid" />
        </div>
        <div class="col poster poster-2 ">
            <img src="https://picsum.photos/300/300?random=2" class="img-fluid" />
        </div>
        <div class="col poster poster-3">
            <img src="https://picsum.photos/300/300?random=3" class="img-fluid" />
        </div>
        <div class="col poster poster-4 ">
            <img src="https://picsum.photos/300/300?random=4" class="img-fluid" />
        </div>
        <div class="col poster poster-5">
            <img src="https://picsum.photos/300/300?random=5" class="img-fluid" />
        </div>
        <div class="col poster poster-6">
            <img src="https://picsum.photos/300/300?random=6" class="img-fluid" />
        </div>
    </div>
</div>