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

Question

Я пытаюсь изменить фоновую анимацию 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');
  }

<div class="cover">
</div>

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

Answer 1

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

.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');

transition: background-image 5s ease-in-out;
}

.cover:hover{
  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');
}

<div class="cover">

</div>

Answer 2

Обычное изменение фона не имеет анимации. Вы можете сделать следующее: Вы уменьшите непрозрачность фона, измените фоновое изображение и снова увеличите непрозрачность. Это даст эффект затухания.

.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 {
    0% { 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'); }
  50% { background-color:rgba(0, 0, 0, 0.5); }
  51% {     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'); }
  100% { background-color:rgba(0, 0, 0, 1); }

<div class="cover">

</div>