Can’t figure out why the css transition doesn’t work

So the code is basically this

JS
const loadSliderImg = (src) =>
    new Promise((resolve, reject) => {
        const sliderImg = new Image()
        sliderImg.onload = () =>
            resolve(sliderImg)
        sliderImg.src = src
    })
loadSliderImg("slider-img.png").then(
    (sliderImg) => (
        (sliderImg.className = "slider-img"),
        (sliderImg.style.top =  "100px",
        document.getElementById("div-container").appendChild(sliderImg),
    setTimeout(() => {
        sliderImg.style.left = "400px"
    }, 1)
    )
)

CSS
.div-container {
  display: block;
  width: 100%;
}
.slider-img {
  position: relative;
  width: 3px;
  height: 150px;
  transition: left 3s;
}

Tried a bunch of stuff but the result is still the same, image moves instantly. I have very similar code where everything goes right, no idea what’s the problem here