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) weglasse, werden die ersten 5 Bilder korrekt angezeigt und animiert. 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 Bootstrap5, bin mir aber sicher, dass das nichts mit diesem Problem zu tun hat, weil

P粉604848588 · Answer

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

编辑：您可以在末尾添加一个附带隐藏属性的海报，只要最后一个海报不包含类.poster，它就可以工作：）

@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%;
}
}

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

Antworte allen(1)Ich werde antworten