Предзагрузка картинок из под background-image

Я делаю сайт и заказчику понадобилась анимация смены картинок на заднем фоне. Задний фон у меня отрисовывается в элементе div и свойством background-image. И теперь еще и анимируется. Но при анимации след слайда, он рвано и спешно его прогружает и в итоге вместо плавного транзишиона получается белый экран. Как я могу сохранить анимацию, и "предзагружать" эти картинки. На IMG переходить не хочется, это сломает структуру сайта и анимировать станет сложнее (если вообще возможно). Как быть?

как выглядит сейчас смена картинки:

#primary-section {
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;

    animation: primaryFade 10s;
    animation-fill-mode: forwards;
    animation-iteration-count: infinite;
    

    color: var(--primary-color);
}

@keyframes primaryFade {
    0% {
        background-image: url(../images/primary-section/1.png)
    }

    25% {
        background-image: url(../images/primary-section/2.png)
    }

    75% {
        background-image: url(../images/primary-section/3.png)
    }

    100% {
        background-image: url(../images/primary-section/1.png)
    }
}