JS изменение исходного изображения с анимацией

У меня проблема с изменением источника изображения с зацикленным появлением / исчезновением в JS и CSS и использованием обратного вызова SetTimeout (). Проблема в том, что последовательность работает странно: иногда изображение меняется до начала перехода, иногда работает нормально, а иногда и наоборот.

Вот мой JS:

const animationTime = 5000;
const transitionTime = 500;

function nextImage() {

  let img = document.getElementById('img1');
  img.classList.remove('hidden');
  setTimeout(function () {
    img.classList.add('hidden');
  },animationTime-transitionTime);
  img.src=randomize();
  setTimeout(nextImage, animationTime);
}

• Функция рандомизировать () просто получает случайный путь изображения из массива.

Вот HTML:

<div class = "some-class">
    <img class = "some-image" id = "img1" src = "1.png">
</div>

А вот CSS:

.some-image {

  transition: opacity 0.5s linear;
  -webkit-transition: opacity 0.5s linear;
  -o-transition: opacity 0.5s linear;
  -moz-transition: opacity 0.5s linear;
  -moz-border-radius: 15px;
}

.hidden {
opacity: 0;
}

Upd. Итак, я отредактировал файл CSS:

.some-image {
    width: 370px;
    height: 190px;
    animation: fade-out;
    animation-duration: 1s;
}

.hidden {
    animation: fade-out;
    animation-duration: 1s;
}

@keyframes fade-in {
    from {opacity: 0;}
    to {opacity: 1;}
}

@keyframes fade-out {
    from {opacity: 1}
    to {opacity: 0}
}

И JS-файл:

function nextImage() {

        let img = document.getElementById('img1');
        img.classList.remove('hidden');
        setTimeout(function () {
            img.classList.add('hidden');
        },animationTime-1000);
        img.src=randomize();

    }
    setTimeout(nextImage, animationTime);
}

И каким-то образом он отлично работает на локальном компьютере, но на выделенном веб-сайте анимация иногда исчезает до того, как изменится источник изображения.