search

Home  >  Q&A  >  body text

Why do images and animations disappear when adding a class to the last column?

<p>I'm trying to animate 6 images in an infinite loop. </p> <p>When I add the 6th image and add the "poster" class, no image displays, but if I omit adding the "poster" class to the 6th column (or image), the first 5 images display correctly and animation. </p> <p>I don't understand why this happens. </p> <p>As you can see, the "poster" class is not in the sixth column, so my code works, but as soon as I add that class, it stops working. </p> <p> (I'm using bootstrap 5 but I'm sure this has nothing to do with this issue as the code as I show it replicates the issue perfectly) </p> <pre class="brush:css;toolbar:false;">@keyframes moves { to { background-position: -100vw 80%; } } .galeria { 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%; } }</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>
P粉792026467P粉792026467469 days ago411

reply all(1)I'll reply

  • P粉604848588

    P粉6048485882023-08-16 10:44:33

    In the sixth column, it works perfectly with class .poster, whether using Bootstrap 5 or not.

    edit: You can add a poster with a hidden attribute at the end and it will work as long as the last poster does not contain class .poster :)

    <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 href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" 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>

    reply
    0
  • Cancelreply