Warum verschwinden Bilder und Animationen, wenn eine Klasse zur letzten Spalte hinzugefügt wird?

Question

Ich versuche, 6 Bilder in einer Endlosschleife zu animieren.

Wenn ich das 6. Bild und die Klasse „Poster“ hinzufüge, wird kein Bild angezeigt. Wenn ich jedoch das Hinzufügen der Klasse „Poster“ zur 6. Spalte (oder zum Bild) verzichte, werden die ersten 5 Bilder korrekt angezeigt Animation.

Ich verstehe nicht, warum das passiert.

Wie Sie sehen können, befindet sich die Klasse „poster“ nicht in der sechsten Spalte, daher funktioniert mein Code, aber sobald ich diese Klasse hinzufüge, funktioniert sie nicht mehr.

(Ich verwende Bootstrap 5, aber ich bin sicher, dass dies nichts mit diesem Problem zu tun hat, da der Code, wie ich ihn zeige, das Problem perfekt reproduziert)

@keyframes bewegt {
  Zu {
    Hintergrundposition: -100vw 80%;
  }
}

.galeria {
  Position: relativ;
  Überlauf versteckt;
}

.Poster {
  Position: absolut;
  Animation: moveAcross 6s linear unendlich;
}
.poster-1 {
  Animationsverzögerung: -0s;
  Animationsdauer: 6s;
}
.poster-2 {
  Animationsverzögerung: -1s;
  Animationsdauer: 6s;
}
.poster-3 {
  Animationsverzögerung: -2s;
  Animationsdauer: 6s;
}
.poster-4 {
  Animationsverzögerung: -3s;
  Animationsdauer: 6s;
}
.poster-5 {
  Animationsverzögerung: -4s;
  Animationsdauer: 6s;
}
.poster-6 {
  Animationsverzögerung: -5s;
  Animationsdauer: 6s;
}

@keyframes moveAcross {
  0 % {
    links: -300px;
  }
  100% {
    links: 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>

Answer 1

在第六列中，它与类.poster完美配合，无论是否使用Bootstrap 5。

编辑： 您可以在末尾添加一个附带隐藏属性的海报，只要最后一个海报不包含类.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>