Как сделать плавное изменение более 4 фонов в css?

Question

Как сделать плавное изменение более 4 фонов в css?

Максим Сафонов Ученик (87), на голосовании 1 год назад

1.Как в @keyframes сделать так чтобы фоны менялись через 50%, у меня просто не получается сделать больше 3-ех фонов потому что получается анимация так:
.background {
width: 100%;
height: 100%;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
background-image: url(img/фон1.jpg);
animation: backgroundChange 10s infinite;
}
@keyframes backgroundChange {
0% {
background-image:url(img/фон1.jpg);
}
50% {
background-image:url(img/фон2.jpg);
}
100% {
background-image:url(img/фон3.jpg);
}
}

2.Почему при анимации отдаления фона, отдаляется вся часть сайта? В том числе и кнопки с текстом,в html куда бы не сувал <div class="background">, после меню или текста, все равно не работает, если после текста сую, то текст становится шире либо расстояние между фоном и текстом

Answer 1

Используй 33% вместо 50%, то есть - 0%, 33%, 66%, 100%.
Проблема в том, что div - блочный элемент... его изменение неминуемо приведет к изменению других элементов... этого можно избежать, если блоку добавить position: absolute, чтобы он существовал независимо от других элементов.