CSS Анимация, плавное изменение background-image

@keyframes headerLane {
    0% {
        background-image: url(../images/header_1.jpg);
    }
    50% {
        background-image: url(../images/header_2.jpg);
    }
    100% {
        background-image: url(../images/header_3.jpg);
    }
}

animation: headerLane 7s linear infinite alternate;
background-position: 0px 70% !important;
background-size: cover;

Могу предложить вот такой вариант, работает скачками как вы просили: (для 4-ех картинок будет 0%,25%,50,75%,100% последняя и предпоследняя должны повторятся, так как 100% это конец анимации)

@keyframes headerLane {
    0% {
        background-image: url(../images/header_1.jpg);
    }
    33% {
        background-image: url(../images/header_2.jpg);
    }
    66% {
        background-image: url(../images/header_3.jpg);
    }
    100% {
        background-image: url(../images/header_3.jpg);
    }
}

Код анимации (можете перепить в одну строку):

animation-name: headerLane;
animation-duration: 21s;
animation-fill-mode: forwards;
animation-iteration-count: infinite;
animation-timing-function: steps(1, end);

PS: длительность нужно умножать на количество элементов которое вы хотите слайдить

https://html5book.ru/css3-animation/ Вот хорошая статья про анимации, обратите внимание на 8 пункт, если я все правильно понял, вы записали кратко свойство animation-duration, которое описывается в 3 пункте, поэтому у вас и происходит плавная анимация.

Именно за то что вам необходимо отвечает свойство: animation-timing-function: steps(1, end); и так как оно отсутствует в вашем коде результат не получается должным.