skip to Main Content

I am trying to animate in an infinite loop 6 images.

When I add the 6th image and if I add the "poster" class, none of the images are displayed, but if I omit adding the "poster" class to the 6th column (or image), the first 5 images display and animate correctly.

I don’t understand why this happens.

CSS

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

HTML

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

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.

(I’m working with bootstrap 5 but I’m sure it has nothing to do with this problemo, since the code, as I present it, replicates the problem perfectly)

2

Answers


  1. I added the poster class to the sixth column here on CodePen and it appears to work. Only thing different is the image source and set a width on the image (as I don’t have your source images)

    Only real change to your provided code is in the HTML <div class="col poster-6"> changed to <div class="col poster poster-6">

    Login or Signup to reply.
  2. It is working perfectly with the class .poster in the sixth column and with or without Bootstrap 5.

    @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/[email protected]/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>
    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search