Как при смене картинки фона сохранить анимацию?

Question

[Ingernirated]

Всем привет.
Есть такой код и при открытии страницы, картинка фона проявляется от 0 до 1.

.head {
	width:100%;
	height:100%;
	background-image:url("image1.jpg");
	animation:slide 1s ease;
}
@keyframes slide {
    from {opacity:0;}
    to {opacity:1;}
}

Но после замены её на другую, анимации уже не происходит, картинка резко меняется.

document.querySelector(".head").style.backgroundImage = "url('image2.jpg')";

Как при смене картинок фона сделать так, чтобы они тоже проявлялись от 0 до 1, при этом на фоне предыдущей?

Answer 1

[Павло Пономаренко]

Увы, если вы хотите показывать две картинки, одна поверх другой - вам необходимо две html-ноды.

Answer 2

[Александр Тарковский]

Насколько я понял задачу - нужно просто менять background-image с эффектом fadeIn? Я бы поэкспериментировал с абсолютным позиционированием, блоком-оберткой и setTimeout.

Реализацию и пояснения я оставлю где-то здесь.