Javascript Background слайдер не перемещается должным образом за кадром влево

Question

Я создал фоновый слайдер, который корректно меняет изображения, но не анимирует за кадром оставленный должным образом.Это просто изменение изображения, что нормально, но не с использованием анимации.Может кто-нибудь предложить какой-нибудь совет, чтобы сделать переходы работать.Ниже приведены мои фрагменты кода.заранее спасибо!

       <div class="page-slider onscreen" id="landing-page" style="background- 
        image: 
         url('/images/backgrounds/IMG_5241.JPG');">
            <div class="page-slider" style="background-image: 
              url('/images/backgrounds/IMG_1230.JPG');">
                <div class="page-slider" style="background-image: 
                  url('/images/backgrounds/IMG_1255.JPG');">

                </div>
            </div>
        </div>

мой css

.page-slider {
    min-height: 100vh;
    background-size: 80%;
    background-repeat: no-repeat;
    background-position: 1000% center;

}

.offscreen-left {
    background-position: -400% center;
    transition-duration: 1s;

}

.onscreen {

    transition-duration: 5s;
    transition-property: transform;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
}

и мой скрипт

(function() {
    var slideCount = document.querySelectorAll(".page-slider").length;
    console.log("slidecount", slideCount);
    var slider = document.getElementsByClassName("page-slider");
    var current = 0;

    function moveSlider(next) {
        slider[current].classList.remove("onscreen");
        slider[current].classList.add("offscreen-left");

        if (typeof next != "undefined") {
            current = next;
        } else {
            current++;
        }

        if (current >= slider.length) {
            current = 0;
        }
        // console.log("the new one is here " + current);

        slider[current].classList.add("onscreen");
    }

    setInterval(function() {
        moveSlider();
    }, 1000);
})();