Warum verschwinden Bilder und Animationen, wenn eine Klasse zur letzten Spalte hinzugefügt wird?-Fragen und Antworten zum chinesischen PHP-Netzwerk

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

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