Плавное увеличение фонового изображения

В CSS3 появилось свойство animation, с помощью которого можно задать элементу скорость и параметры изменения других свойств, например transform. Параметры начала и окончания анимации указываются в правиле @keyframes.

Пример использования:

<div class="block">
	<div class="block-image">
		<img src="https://snipp.ru/demo/223/image.jpg">
	</div>
	<div class="block-text">
		Lorem Ipsum is simply dummy text of the printing and typesetting industry
	</div>
</div>
HTML
.block {
	height: 500px;
	overflow: hidden;
	position: relative;
}
.block-text {
	position: absolute;
	right: 0;
	left: 0;
	z-index: 50;
	padding: 20px;
	font-size: 49px;
	font-weight: 900;
	color: #fff700;
	line-height: 1.4;
	text-shadow: 3px 3px 20px #000;
}
.block-image {
	position: absolute;
	bottom: 0;
	left: 0;
	z-index: 1;
}
.block-image img {
	width: 100%;
	margin-top: -25%;
	transform-origin: bottom right;
	animation: grow 150000ms ease;
}
@keyframes grow {
	0% {
		transform: scale(1);
	}
	100% {
		transform: scale(2);
	}
}
CSS

Результат

15.08.2019 , обновлено 30.09.2019
Предыдущая запись Фон под текстом
Следующая запись Видео в качестве фона

Комментарии

, чтобы добавить комментарий.

Другие публикации

MD5 в JS
В JS нет встроенных функций хеширования, включая MD5, поэтому придется использовать сторонние реализации. Далее приведен пример, функция работает с UTF-8 и кириллическими символами.
02.07.2019
4308
+2
Список Mime
Ниже приведён список MIME-заголовков и расширений файлов.
11.07.2019
1352
+1
Contenteditable – текстовый редактор
Если добавить атрибут contenteditable к элементу, его содержимое становится доступно для редактирования пользователю, а...
12.12.2019
4817
+7
Как скрыть лишний текст в блоке
Имеем несколько колонок с разным по длине текстом, нужно сделать их одинаковой высоты и скрыть лишнее.
15.04.2020
1579
+1
Whois, как получить данные IP-адреса и домена в PHP
Несколько примеров как в PHP получить информацию о домене и IP-адресе.
10.04.2019
2382
0
Стилизация Checkbox
Несколько примеров как изменить внешний вид чекбоксов с помощью CSS, изображений и немного JS.
22.04.2020
1698
+1