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

36
Алексей,

При изменении фоновой картинки, браузеру требуется некоторое время на загрузку новой, поэтому даже при добавлении свойства 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 | Обновлено 31 декабря 2020
верстка, костыли
Похожие статьи
Анимация при скроллинге 0
Простенький jQuery скрипт для добавления анимации блоков, при их появлении на экране. Можно использо...
Читать дальше »
Алексей,
Скошенные углы у блока 0
Нездоровая тендеция пошла у дизайнеров на такой вид блоков. А в css нет готового решения, приходитьс...
Читать дальше »
Алексей,
Комментарии