Почему при наведении курсора изображение не анимируется при наведении курсора?

Question

Это JS для скользящего бита.

function arrowRight(){

            var tempIndex = skillbars.indexOf(current);
            if ((tempIndex + 1) == skillbars.length){
                var prevelement = document.getElementsByClassName(current)[0];
                prevelement.style.display = "none";
                current = skillbars[0];
                var newelement = document.getElementsByClassName(current)[0];
                newelement.style.display = "flex";
                newelement.classList.add("slide-right");
                newelement.classList.remove("slide-left");
                replacedots(current);
            }else{
                var prevelement = document.getElementsByClassName(current)[0];
                prevelement.style.display = "none";
                current = skillbars[tempIndex + 1];
                var newelement = document.getElementsByClassName(current)[0];
                newelement.style.display = "flex";
                newelement.classList.add("slide-right");
                newelement.classList.remove("slide-left");
                replacedots(current);
            }
        }
        function replacedots(current){
            var workdotstr = ""
            for(i = 0; i < skillbars.length; i++){
                var checking = skillbars[i];
                if (checking == current){
                    workdotstr += "&#9679 "
                }
                else{
                    workdotstr += "&#9675 "
                }
            }
            document.getElementById("workdots").innerHTML = workdotstr;
        }

Я добавил классы и удалил их для переходов после каждого слайда. Когда я добавил это, масштаб после наведения на каждом слайде больше не работал. Когда я его убрал, он снова заработал. Какое это имеет отношение к шкале? Почему это так?

Вот код для слайда, если это проблема. Слайд вправо и влево - это в основном один и тот же код копирования / вставки. Я играл с различными переходами между слайдами и мне не нравился ни один из них. Я просто остановился, но держал слайд вправо и влево отдельно, на случай, если позже передумаю ..

.slide-right {
    -webkit-animation: slide-right 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
            animation: slide-right 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}
@-webkit-keyframes slide-right {
  0% {
    -webkit-transform: translateZ(-80px);
            transform: translateZ(-80px);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateZ(0);
            transform: translateZ(0);
    opacity: 1;
  }
}

Наконец, это CSS для наведения на изображения.

.workbar_inner{
    width: 45%;
    height: 20vw;
    overflow:hidden;
    padding: 5px;
    margin: 10px;
    transition: all .2s;
    border-radius: 15px;
    cursor: pointer;
}
.workbar_img{
    width:100%;
    height:100%;
    border-radius: 15px;
    overflow:hidden;
    transition: all .5s;

    background-color: #a4508b;
    background-size: cover;
    background-position: center bottom;

    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}
.workbar_inner:hover .workbar_img{
    transform: scale(1.2);
}

Шкала при наведении работает только до нажатия стрелок. Как только я нажимаю на них, они больше не работают. Почему это? Как мне это исправить?