How to make this CSS animation go "backwards" – Html

I have the code for an automatic pure HTML and CSS slider, but im struggling to make it go in the opposite direction, it originally goes from right to left but im trying to make it go from left to right.

This is the original code https://codepen.io/kevinwitkowski/pen/MWbxNGe

This is my "version" https://codepen.io/sappho7124/pen/Rwewqpd

I changed it so its pure CSS instead of SCSS and changed from px to vw so its more responsive, other than that its the same code, you can see in my codepen that i have tried changing a couple things in the bottom row try to make it work to no avail.

I tried changing flex-direction: row-reverse; justify-content: flex-end; and the direction of the animation but nothing seems to work.

EDIT: It does work in the sense that the animation plays but its not showing the items as i want it, there is some kind of gap that is not there when the animation plays from right to left

This is the code from the original so you dont need to go to the codepen

HTML

<div class="slider">
    <div class="slide-track">
        <div class="slide">
            <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/557257/2.png" height="100" width="250" alt="" />
        </div>
        <div class="slide">
            <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/557257/3.png" height="100" width="250" alt="" />
        </div>
        <div class="slide">
            <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/557257/4.png" height="100" width="250" alt="" />
        </div>
        <div class="slide">
            <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/557257/5.png" height="100" width="250" alt="" />
        </div>
        <div class="slide">
            <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/557257/6.png" height="100" width="250" alt="" />
        </div>
        <div class="slide">
            <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/557257/7.png" height="100" width="250" alt="" />
        </div>
        <div class="slide">
            <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/557257/1.png" height="100" width="250" alt="" />
        </div>
        <div class="slide">
            <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/557257/2.png" height="100" width="250" alt="" />
        </div>
        <div class="slide">
            <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/557257/3.png" height="100" width="250" alt="" />
        </div>
        <div class="slide">
            <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/557257/4.png" height="100" width="250" alt="" />
        </div>
        <div class="slide">
            <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/557257/5.png" height="100" width="250" alt="" />
        </div>
        <div class="slide">
            <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/557257/6.png" height="100" width="250" alt="" />
        </div>
        <div class="slide">
            <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/557257/7.png" height="100" width="250" alt="" />
        </div>
    </div>
</div>

SCSS

body {
    align-items: center;
    justify-content: center;
}

$animationSpeed: 40s;

@keyframes scroll {
    0% { transform: translateX(0); }
    100% { transform: translateX(calc(-250px * 7))}
}

.slider {
    height: 100px;
    margin: auto;
    overflow:hidden;
    position: relative;
    width: auto;
    
    .slide-track {
        animation: scroll $animationSpeed linear infinite;
        display: flex;
        width: calc(250px * 14);
    }
    .slide {
        height: 100px;
        width: 250px;
    }
}