마지막 열에 클래스를 추가하면 이미지와 애니메이션이 사라지는 이유는 무엇입니까?

Question

무한 루프에서 6개의 이미지에 애니메이션을 적용하려고 합니다.

6번째 이미지를 추가하고 "포스터" 클래스를 추가하면 이미지가 표시되지 않지만, 6번째 열(또는 이미지)에 "포스터" 클래스 추가를 생략하면 처음 5개의 이미지가 올바르게 표시되고 생기.

왜 이런 일이 발생하는지 이해가 되지 않습니다.

보시다시피 "포스터" 클래스는 6번째 열에 없으므로 코드는 작동하지만 해당 클래스를 추가하자마자 작동이 중지됩니다.

(저는 부트스트랩 5를 사용하고 있지만 코드가 문제를 완벽하게 복제한다는 것을 보여주기 때문에 이것이 이 문제와 관련이 없다고 확신합니다.)

@keyframes 이동 {
  에게 {
    배경 위치: -100vw 80%;
  }
}

.갤러리아 {
  위치: 상대;
  오버플로: 숨김;
}

.포스터 {
  위치: 절대;
  애니메이션: moveAcross 6s 선형 무한;
}
.포스터-1 {
  애니메이션 지연: -0s;
  애니메이션 지속 시간: 6초;
}
.포스터-2 {
  애니메이션 지연: -1초;
  애니메이션 지속 시간: 6초;
}
.포스터-3 {
  애니메이션 지연: -2초;
  애니메이션 지속 시간: 6초;
}
.포스터-4 {
  애니메이션 지연: -3초;
  애니메이션 지속 시간: 6초;
}
.포스터-5 {
  애니메이션 지연: -4초;
  애니메이션 지속 시간: 6초;
}
.포스터-6 {
  애니메이션 지연: -5초;
  애니메이션 지속 시간: 6초;
}

@keyframes moveAcross {
  0% {
    왼쪽: -300px;
  }
  100% {
    왼쪽: 110%;
  }
}

Answer 1

6번째 열에서는 Bootstrap 5 사용 여부에 관계없이 클래스 .poster와 완벽하게 작동합니다.

편집: 마지막에 숨겨진 속성이 있는 포스터를 추가할 수 있으며 마지막 포스터에 클래스가 포함되지 않는 한 작동합니다 .poster :)

으아악

으아악 으아악