Mengapa imej dan animasi hilang apabila menambah kelas pada lajur terakhir?

Question

Saya cuba menghidupkan 6 imej dalam gelung tak terhingga.

Apabila saya menambah imej ke-6 dan menambah kelas "poster", tiada imej dipaparkan, tetapi jika saya meninggalkan menambah kelas "poster" pada lajur ke-6 (atau imej), 5 imej pertama muncul dengan betul dan animasi.

Saya tidak faham mengapa ini berlaku.

Seperti yang anda lihat, kelas "poster" tiada dalam lajur keenam, jadi kod saya berfungsi, tetapi sebaik sahaja saya menambah kelas itu, ia berhenti berfungsi.

(Saya menggunakan bootstrap 5 tetapi saya pasti ini tiada kaitan dengan isu ini kerana kod yang saya tunjukkan ia mereplikasi isu dengan sempurna)

@keyframes bergerak {
  kepada {
    kedudukan latar belakang: -100vw 80%;
  }
}

.galeria {
  kedudukan: relatif;
  limpahan: tersembunyi;
}

.poster {
  jawatan: mutlak;
  animasi: moveAcross 6s linear tak terhingga;
}
.poster-1 {
  kelewatan animasi: -0s;
  tempoh animasi: 6s;
}
.poster-2 {
  kelewatan animasi: -1s;
  tempoh animasi: 6s;
}
.poster-3 {
  kelewatan animasi: -2s;
  tempoh animasi: 6s;
}
.poster-4 {
  kelewatan animasi: -3s;
  tempoh animasi: 6s;
}
.poster-5 {
  kelewatan animasi: -4s;
  tempoh animasi: 6s;
}
.poster-6 {
  kelewatan animasi: -5s;
  tempoh animasi: 6s;
}

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

Dalam lajur keenam, ia berfungsi dengan sempurna dengan kelas .poster, sama ada menggunakan Bootstrap 5 atau tidak.

Sunting: Anda boleh menambah poster dengan sifat tersembunyi pada penghujungnya dan ia akan berfungsi selagi poster terakhir tidak mengandungi kelas .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>