Не всегда срабатывает анимированное переключение картинок

Друзья, всем привет! Для начала немного введу в курс дела: делаю лендинг для фотостудии, на этом лендинге есть блок с фотографиями этой фотостудии, и в этом блоке данные фотографии размещены по тематическим секциям (групповые фото, портреты и так далее). Секции можно переключать, соответственно фото будут меняться. При переключении этих секций необходимо делать небольшую анимацию изменения фото. Ниже я приложу ссылку на видео на ютубе, я залил его, чтоб Вам было понятнее, как это выглядит.

Так вот проблема: анимация несложная, я ее сделал и она работает (картинка как бы затухает и потом подставляется новая картинка), но иногда, особенно если после перезагрузки компа зайти на сайт в первый раз, анимация не срабатывает. То происходит затухание а картинка меняется через секунды 3 вообще, то сначала меняется картинка, а затем происходит анимация. Но если так пощёлкать, то через 5-6 раз оно снова начинает работать нормально.

Ссылка на видео с демо как это вообще выглядит: https://youtu.be/pUCmn8y1f7Q

Код js который и делает анимацию и изменение картинок:

    // загружаем картинки, соответствующие выбранной секции
    const changeImages = (clickedInd) => {
        photosChanging = true; // флаг, блокирующий интерфейс пока идет анимация переключения фото

        // меняем фото с анимацией плавного затухания и появления
        for (let i = 0; i < imagesAtPage; i++) {
            sectionPhotos[i].classList.add('pro-services__gallery-img--fade');
            sectionPhotos[i].src = imageSections[clickedInd].images[i];

            setTimeout(() => {
                sectionPhotos[i].classList.remove('pro-services__gallery-img--fade');
                if (i === imagesAtPage - 1) {
                    photosChanging = false;
                }
            }, 500);
        }

        changeSelectedImage(imageSections[clickedInd].images[0]);
    };

Вот css код класса pro-services__gallery-img--fade, который и делает анимацию:

@keyframes fadeOut {
    to { opacity: 1; }
}
.pro-services__gallery-img--fade {
    opacity: 0;
    animation-name: fadeOut;
    animation-duration: 0.6s;
}

Небольшие пояснения к коду js: imagesAtPage - просто константа, хранящая кол-во картинок по которым итерируем, равняется 4 photosChanging - флаг, который блокирует интерфейс пока происходит анимация, чтоб юзер не смог кликать как сумасшедший в этот момент clickedInd - индекс кликнутого пункта меню секций, нужен для выбора соответствующих данному пункту картинок

UPD: прошу прощенья, не заметил, в функции, которая меняет картинки, на последней строчке ещё имеется вызов другой функции, который выглядит вот так: changeSelectedImage(imageSections[clickedInd].images[0]); Эта функция изменяет большую картинку, которая на видео справа (как бы текущая выбранная картинка), ее описывать не стал, так как думаю, что она к проблеме не имеет особого отношения

Всем огромное спасибо за помощь, друзья!