I built a section of a website that shows the logos of the company's partners, and it auto scrolls horizontally.

Normally when it gets to the end of the icon list, the animation is supposed to play from the beginning in a smooth manner, but this does not happen in my implementation. Instead there is a sudden break and the animation suddenly starts from the beginning.

Please how can I fix this? below is my code

template

        <div class="ref-jumbo-content">
            <div class="ref-jumbo-content-container">
                <div class="ref-jumbo-content-layout">
                    <img
                        v-for="(logo, index) in logos"
                        :key="index"
                        :src="require(`@/assets/svg/${logo}`)" 
                        :alt="logo"
                    >

                    <img
                        v-for="(logo, index) in logos"
                        :key="index*111"
                        :src="require(`@/assets/svg/${logo}`)" 
                        :alt="logo"
                    >
                </div>
            </div>
        </div>

my NuxtJs script, this is where the icons are loaded

<script>
export default {
    data() {
        return {
            logos : [
                'bbcradio.svg',
                'glamour.svg',
                'metro.svg',
                'skynews.svg',
                'theguardian.svg',
                'theindependent.svg',
                'thesun.svg',
                'thetelegraph.svg',
                // 'thevoice.svg'
            ]
        }
    }
}
</script>

and below is my CSS and where the animation is done

<style>
.ref-jumbo-content {
    position: relative;
    width: 100%;
    height: 90px;
}

.ref-jumbo-content-container {
    position: relative;
    width: 100%;
    height: 100%;
    overflow-x: scroll;
    overflow-y: hidden;
}

.ref-jumbo-content-container::-webkit-scrollbar {
    display: none;
}

/* Hide scrollbar for IE, Edge and Firefox */
.ref-jumbo-content-container {
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;  /* Firefox */
}

.ref-jumbo-content-layout {
    height: 100%;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-items: center;
    position: absolute;
    animation: marquee 10s linear infinite;
}

.ref-jumbo-content-layout img {
    padding: 0 40px;
}

@keyframes marquee {
    0% {
        /* transform: translate(0); */
        left: 0;
    }
    100% {
        /* transform: translate(0); */
        left: -100%;
    }
}

/* small screen */
@media only screen and (max-width: 950px) {
    .ref-jumbo-content-layout img {
        padding: 0 20px;
    }
}
</style>