How to prevent css horizontal marquee animation from reset

Question

I am trying to make a rotating banner (marquee) with a div that contains images. I am trying to make the div take the full with of the screen and have the image loop horizontally and infinitely across without restarting. So basically, as image is disappearing on the left, it's showing up at the right at the same time.

Currently, it kinda works but at the end of the images, there is a huge gap and then the animation retarts. I want that gap to disappear and always have the images take the whole width. Is that possible?

Here's my code:

.marquee { 
      width: 100vw;
      background: red;
      /* height: 100px; */
      margin-left: calc(50% - 50vw);
      margin-right: calc(50% - 50vw);
      overflow: hidden;
      white-space: nowrap;
      position: relative;
      /* width: 100%; */
    }

    .marquee span {
    display: inline-block;
    /* padding-right: 103px; */
    margin-left: 10px;
    margin-right: 10px;
    animation: marquee 10s linear infinite;
    width: 210px;
    }
    
    .marquee span img{
    width: 210px;
    height: auto;
    }

    @keyframes marquee {
    from {
    transform: translateX(100vw);
    }
    to {
    transform: translateX(-100vw);
    }
    }

How to prevent css horizontal marquee animation from reset

0 Answers