最後の列にクラスを追加すると画像やアニメーションが消えるのはなぜですか?

Question

6 つの画像を無限ループでアニメーション化しようとしています。

6 番目の画像を追加して「poster」クラスを追加すると、画像は表示されませんが、6 列目 (または画像) に「poster」クラスの追加を省略すると、最初の 5 つの画像が正しく表示され、アニメーションが表示されます。

なぜこのようなことが起こるのかわかりません。

ご覧のとおり、「poster」クラスは 6 列目にないため、コードは機能しますが、そのクラスを追加するとすぐに機能しなくなります。

(ブートストラップ 5 を使用していますが、表示されているコードは問題を完全に再現しているため、これはこの問題とは関係ないと確信しています)

@keyframes は {
  に {
    背景位置: -100vw 80%;
  }
}

.ガレリア {
  位置: 相対的;
  オーバーフロー: 非表示;
}

.ポスター {
  位置: 絶対;
  アニメーション: moveAcross 6s リニア無限。
}
.poster-1 {
  アニメーション遅延: -0s;
  アニメーション期間: 6 秒。
}
.poster-2 {
  アニメーション遅延: -1 秒;
  アニメーション期間: 6 秒。
}
.poster-3 {
  アニメーション遅延: -2 秒;
  アニメーション期間: 6 秒。
}
.poster-4 {
  アニメーション遅延: -3 秒;
  アニメーション期間: 6 秒。
}
.poster-5 {
  アニメーション遅延: -4 秒;
  アニメーション期間: 6 秒。
}
.poster-6 {
  アニメーション遅延: -5 秒;
  アニメーション期間: 6 秒。
}

@keyframesmoveAcross {
  0% {
    左: -300ピクセル;
  }
  100% {
    左: 110%。
  }
}

<div class="row justify-content-center">
    <div class="ガレリア">
        <div class="col ポスター ポスター-1">
            <img src="images/posters/poster1.jpg" class="img-fluid" />
        </div>
        <div class="col ポスター ポスター-2 ">
            <img src="images/posters/poster2.jpg" class="img-fluid" />
        </div>
        <div class="col ポスター ポスター-3">
            <img src="images/posters/poster3.jpg" class="img-fluid" />
        </div>
        <div class="col ポスター ポスター-4 ">
            <img src="images/posters/poster4.jpg" class="img-fluid" />
        </div>
        <div class="col ポスター ポスター-5">
            <img src="images/posters/poster5.jpg" class="img-fluid" />
        </div>
        <div class="col ポスター-6">
            <img src="images/posters/poster6.jpg" class="img-fluid" />
        </div>
    </div>
</div>

Answer 1

6 番目の列では、Bootstrap 5 を使用しているかどうかに関係なく、クラス .poster で完全に動作します。

＃＃＃編集： 最後に非表示属性を持つポスターを追加できます。これは、最後のポスターにクラス

.poster が含まれていない限り機能します :) リーリー

リーリー リーリー