Плавное изменение background-image

Алексей,

30 декабря 2020 15:35

При изменении фоновой картинки, браузеру требуется некоторое время на загрузку новой, поэтому даже при добавлении свойства transition, изменение картинки будет происходить с рывком.

Но есть небольшой "костыль": если добавить микрозадержку у transition, тогда рывка не будет.

Почему костыль? Потому что в firefox не работает) А также, если картинка большая и скорость интернета у клиента маленькая, то рывок при замене всё равно будет. В общем, способ подходит только для развлечения.

Лучше использовать 2 элемента или через псевдоэлемент :after, когда одна картинка с position: absolute скрыта и показывается при наведении.

Пример с задержкой transition ниже:

.christmas-tree{
	background-image: url('/img/christmas-tree-1.jpg');
	transition: background-image 0.25s ease-in-out 0.1s;
}
.christmas-tree:hover{
	background-image: url('/img/christmas-tree-2.jpg');
}

Пример с псевдоэлементом:

.christmas-tree2{
	background-image: url('/img/christmas-tree-1.jpg');
	position: relative;
}
.christmas-tree2:after{
	background-image: url('/img/christmas-tree-2.jpg');
	position: absolute;
	opacity: 0;
	transition: opacity 0.25s ease-in-out;
}
.christmas-tree2:hover:after{
	opacity: 1;
}

С наступающим 2021 годом :)

Есть вопросы или нашли ошибку? Напишите комментарий (можно без регистрации), отвечать стараюсь быстро.

Опубликовано 30 декабря 2020 | Обновлено 14 мая 2023

верстка, костыли