<p>J'essaie d'animer 6 images dans une boucle infinie. </p> <p>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. </p> <p>Je ne comprends pas pourquoi cela se produit. </p> <p>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. </p> <p> (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) </p> <pre class="brush:css;toolbar:false;">@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></pre>

<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>