国产av日韩一区二区三区精品,成人性爱视频在线观看,国产,欧美,日韩,一区,www.成色av久久成人,2222eeee成人天堂

<p>Ich versuche, 6 Bilder in einer Endlosschleife zu animieren. </p> <p>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. </p> <p>Ich verstehe nicht, warum das passiert. </p> <p>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. </p> <p> (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) </p> <pre class="brush:css;toolbar:false;">@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 %; } }</pre> <pre class="brush:html;toolbar:false;"><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></pre>

<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  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>