CSS3 Плавная анимация для изменения фонового изображения ⇐ CSS

[Anonymous]

Я пытаюсь изменить фоновую анимацию элемента div с помощью CSS-анимации, однако мне не удается сделать переход плавным.

Есть идеи, как это сделать сделать это? Вот мой код.

Код: Выделить всё

.cover {
height: 200px;
width: 200px;
background-image: url('https://images.unsplash.com/photo-1582201943021-e8e5cb6dedc2?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1562&q=80');

animation: mymove 5s;
animation-delay: 5s;
animation-timing-function: ease-in-out;
-webkit-animation-timing-function: ease-in-out;
}

@keyframes mymove {
from {
background-image: url('https://images.unsplash.com/photo-1582201943021-e8e5cb6dedc2?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1562&q=80');
}
to {
background-image: url('https://images.unsplash.com/photo-1582480356444-60ca00301659?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2001&q=80');
}

Код: Выделить всё

Что я здесь делаю не так?


Подробнее здесь: https://stackoverflow.com/questions/603 ... ound-image