Is there a way to remove the white spacing at the end of the animation?

UmairFarooq 0
Viewed 19

I know its because of the translate:300px but without it the animation makes a sudden jump to first image which doesn't look very nice. I tried everything any help would be appreciated.

.container {
        outline: 1px solid red;
        width: 250px;
        overflow: hidden;
        white-space: nowrap;
       
    }

    .image-wrapper {
        translate: 300px;
        animation: scroll 3s linear infinite ;
    }
    .image-wrapper > img {
        width:250px
    }

    @keyframes scroll {
        100% {
            translate: -750px;
        }

    }
<div class="container">
        <div class="image-wrapper">
            <img src="https://images.unsplash.com/photo-1662590653876-49029aa90353?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxlZGl0b3JpYWwtZmVlZHwxMHx8fGVufDB8fHx8&auto=format&fit=crop&w=500&q=60"
                alt="">
            <img src="https://images.unsplash.com/photo-1662556224812-06ee64dec478?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxlZGl0b3JpYWwtZmVlZHw4fHx8ZW58MHx8fHw%3D&auto=format&fit=crop&w=500&q=60"
                alt="">
            <img src="https://images.unsplash.com/photo-1662421744749-b8ce69a99c10?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxlZGl0b3JpYWwtZmVlZHwxNXx8fGVufDB8fHx8&auto=format&fit=crop&w=500&q=60"
                alt="">
        </div>
    </div>

css html
1 Answers

Reduce the translation at the end by little bit.

@keyframes scroll {
    100% {
        translate: -550px;
    }

}

This will solve your issue. But if your target is to prepare a carousel, use bootstrap carousel or other one like owl carousel which has much inbuilt functionalities.

Mash9620
Related