Negative vw value is not recognized in translateX(-100vw)

I am using css transitions and a little javascript to make elements slide into the page from the left or right.

From the right side (starting from transform: translateX(100vw);) it works perfectly fine.
But from the left side (negative translate value: transform: translateX(-100vw);) it does not work at all. There is no error, but the element just pops up at the end of the transition without any “animated” movement.

If I use a px value instead of vw for the negative/ left side, it also works fine. I found several examples where people used negative vw values and did not seem to have problems with it…

I also tried transform: translateX(calc(0px - 100vw));. No luck…

(I am not using any libraries etc.)

<!-- HTML -->

<div class="container">
  <div class="slide-in l"></div>
  <div class="slide-in r"></div>
</div>

/* CSS */

.slide-in {
  transition: transform 0.8s ease;
}
.slide-in.l {
  transform: translateX(-100vw); /* this is the line does not work */
}
.slide-in.r {
  transform: translateX(100vw);
}
.slide-in.show {
  transform: translateX(0);
}

/* JavaScript */

const slider = document.querySelectorAll('.slide-in');

window.addEventListener("load", () => {
    slider.forEach(s => {
        s.classList.add('show');
    })
});

Any ideas what could be the problem?