Оформляем страницу-заглушку при помощи CSS3. Примеры, решения.

Здравствуйте дорогие читатели нашего блога. Мы всегда стараемся подобрать для вас самые интересные и простые варианты решения различных сложных ситуаций и об одной из них мы поговорим сегодня.

К нам обратился наш читатель и попросил предложить интересный вариант оформления страницы заглушки для сайта. Хотели бы отметить, что данное решение подходит для всех сайтов, а так же позволяет реализовывать все ваши идеи, добавлять любую анимацию, благодаря CSS3 не грузит сервер, быстро загружается. Таким образом можно оформлять страницы ошибки 404, разделы которые находятся в разработке, ошибки переходов и другие проблемы.

Ниже мы прикрепили для вас три варианта реализации анимированных эффектов для создания заглушки «Сайт в разработке», как упоминалось выше, можно переделать данную страницу под ваши нужды, а лучше держать все варианты в архиве и использовать их в нужный момент.

Заглушка для обувного магазина

Обратите внимание, что я добавил более длительную задержку для этого примера, чтобы дать время для загрузки изображений.

В первом примере будет несколько элементов, которые мы будем анимировать. Темой для этого примера будет скоро страница.
У нас будет основной контейнер с областью контента. Внутри мы разместим несколько рядов для миниатюр. Кроме того, у нас будет строка контента для основных заголовков. После того, как мы покажем основную область содержимого, мы добавим боковой элемент, который будет содержать ввод электронной почты:

Html

				
					<div class="sp-container">
	<div class="sp-content">
		<div class="sp-row">
			<span><img decoding="async" src="images/example1/1.png" /></span>
			<span><img decoding="async" src="images/example1/2.png" /></span>
			<span><img decoding="async" src="images/example1/3.png" /></span>
			<span><img decoding="async" src="images/example1/4.png" /></span>
			<span><img decoding="async" src="images/example1/5.png" /></span>
		</div>
		<div class="sp-row sp-side-row">
			<span><img decoding="async" src="images/example1/11.png" /></span>
			<span><img decoding="async" src="images/example1/12.png" /></span>
		</div>
		<div class="sp-row sp-content-row">
			<h1>Coming Soon</h1>
			<h2>Designer Shoes that you dream of for incredible prices</h2>
			<h1 class="sp-title"><em>Little</em> Blue Shoe</h1>
		</div>
		<div class="sp-row sp-side-row">
			<span><img decoding="async" src="images/example1/13.png" /></span>
			<span><img decoding="async" src="images/example1/14.png" /></span>
		</div>
		<div class="sp-row">
			<span><img decoding="async" src="images/example1/6.png" /></span>
			<span><img decoding="async" src="images/example1/7.png" /></span>
			<span><img decoding="async" src="images/example1/8.png" /></span>
			<span><img decoding="async" src="images/example1/9.png" /></span>
			<span><img decoding="async" src="images/example1/10.png" /></span>
		</div>
		<div class="sp-arrow"></div>
	</div>
	<div class="sp-side">
		<h2>Be the first to know:</h2>
		<div class="sp-input">
			<input type="text" value="Your email"/>
			<a href="index.html">Go</a>
		</div>
	</div>
</div>
				
			

Хорошо, теперь самое интересное: CSS!

CSS

Итак, основной идеей этого примера является следующая последовательность анимаций:

  1. Миниатюры появляются с fromBack .
  2. Первый h1 появляется с fromBack .
  3. Подзаголовок h2 появляется с fromBack .
  4. Первый h1 и подзаголовок h2 исчезают с помощью fadeOut .
  5. Миниатюры начинают последовательно исчезать с помощью fadeOut , а второй h1 появляется с помощью fadeInColor . Кроме того, содержимое перемещается влево и уменьшается с помощью sizeDownMove .
  6. Стрелка и боковое содержимое скользят слева с помощью slideIn

Давайте отцентрируем основной контейнер и позиционируем содержимое абсолютно:

				
					.sp-container {
	position: relative;
	width: 1000px;
	height: 600px;
	margin: -40px auto 0 auto;
}
.sp-content {
	position: absolute;
	z-index: 100;
	width: 800px;
	height: 600px;
	left: 0px;
	top: 0px;
	animation: sizeDownMove 0.9s ease-in-out 6s backwards;
	transform: scale(0.6);
	transform-origin: 0% 50%;
}
				
			

Как видите, мы применяем анимацию к содержимому, которое будет перемещать и масштабировать его, но только через 6 секунд. Мы посмотрим на эти анимации позже.

Стрелка также будет абсолютно позиционированным элементом с фоновым изображением:

				
					.sp-arrow {
	background: transparent url(../images/arrow.png) no-repeat top left;
	position: absolute;
	top: 50%;
	margin-top: -77px;
	left: 82%;
	width: 198px;
	height: 155px;
	animation: slideIn 0.6s ease-in-out 6s backwards;
	z-index: 100;
}
				
			
Боковой элемент будет содержать ввод электронной почты, и мы разместим его в правой части экрана:
				
					.sp-side {
	width: 460px;
	height: 300px;
	position: absolute;
	right: 10px;
	top: 25%;
	animation: slideIn 0.6s ease-in-out 6s backwards;
}
				
			

Стрелка и боковой элемент будут скользить, но мы рассмотрим это через минуту.

Давайте стилизуем заголовок:

				
					.sp-side h2 {
	font-size: 70px;
	padding: 20px 0px;
	text-align: center;
	color: #fff;
	text-transform: uppercase;
	text-shadow: 1px 1px 2px rgba(0,0,0,0.2);
	font-family: 'Unlock', Arial, sans-serif;
}
				
			
…и обертка ввода с вводом текста и кнопкой:
				
					.sp-input {
	background-color: rgba(255,255,255,0.3);
	height: 30px;
	padding: 20px;
	border-radius: 10px;
	margin: 0 auto;
	width: 260px;
}
.sp-input input[type="text"] {
	width: 210px;
	padding: 6px;
	background-color: #fff;
	border: 1px solid #ddd;
	border-radius: 4px;
	float: left;
	font-family: 'Cookie', serif;
	font-size: 18px;
}
.sp-input input[type="text"]:focus {
	outline-color: #acdacf;
}
.sp-input a {
	float: left;
	background-color: #418e7b;
	color: #fff;
	width: 30px;
	height: 30px;
	border: none;
	border-radius: 50%;
	margin-left: 5px;
	text-align: center;
	line-height: 30px;
	cursor: pointer;
	font-family: 'Unlock', Arial, sans-serif;
}
.sp-input a:hover {
	background-color: #fff;
	color: #418e7b;
}
				
			
Теперь давайте посмотрим на то, что находится внутри основного контента. Во-первых, мы стилизуем заголовок, который будет анимироваться так, чтобы он появлялся сзади, а затем мы постепенно удалим его:
				
					.sp-content h1:first-child {
	font-size: 100px;
	text-align: center;
	color: #fff;
	text-transform: uppercase;
	text-shadow: 1px 1px 2px rgba(0,0,0,0.2);
	line-height: 80px;
	padding: 30px 0px 20px 0px;
	font-family: 'Unlock', Arial, sans-serif;
	animation: 
		fromBack 1.2s ease-in-out 1.5s backwards, 
		fadeOut 0.5s linear 4.5s forwards;
}
				
			
Второй заголовок появится позже, после того, как исчезнет первый:
				
					.sp-content h1.sp-title {
	font-size: 90px;
	line-height: 80px;
	position: absolute;
	top: 50px;
	left: 160px;
	width: 470px;
	border-radius: 50%;
	background-color: rgba(255, 255, 255, 0.3);
	padding-top: 155px;
	height: 305px;
	text-transform: uppercase;
	text-align: center;
	color: #518f7e;
	text-shadow: 1px 1px 1px rgba(255,255,255,0.9);
	font-family: 'Unlock', Arial, sans-serif;
	animation: fadeInColor 1.2s linear 5.2s backwards;
}
.sp-content h1:last-child em {
	font-family: 'Cookie', serif;
	text-transform: none;
}
				
			
Подзаголовок, как и первый H1, появится, а затем исчезнет:
				
					.sp-content h2 {
	font-size: 36px;
	text-align: center;
	color: #518f7e;
	font-family: 'Cookie', serif;
	text-shadow: 1px 1px 1px rgba(255,255,255,0.9);
	opacity: 0;
	animation: 
		fromBack 0.6s ease-in-out 2.6s backwards, 
		fadeOut 0.5s linear 4.5s backwards;
}
				
			
Теперь давайте стилизуем эти строки, чтобы разместить большие пальцы:
				
					.sp-content-row {
	width: 466px;
	height: 300px;
	float: left;
}
.sp-side-row {
	width: 150px;
	float: left;
}
.sp-row img {
	display: block;
	z-index: 1000;
	position: relative;
}
				
			
Каждый из промежутков большого пальца также отображается путем масштабирования их от 0 до 1, что заставит их выглядеть так, как будто они входят сзади. Затем позже мы хотим их затухать:
				
					.sp-row span {
	position: relative;
	float: left;
	margin: 2px;
	z-index: 100;
	transform: scale(1);
	opacity: 0;
	animation: 
		fromBack 0.4s linear backwards, 
		fadeOut 0.3s linear backwards;
}
				
			
Мы хотим создать последовательность, в которой каждый следующий бегунок появляется и исчезает с задержкой. Итак, мы возьмем каждую строку и укажем эти задержки для каждого дочернего элемента span. Обратите внимание, что 4-й ряд находится справа, поэтому мы создаем впечатление, будто движемся по часовой стрелке:
				
					.sp-row:nth-child(1) span:nth-child(1) {
	animation-delay: 0s, 5s;
}
.sp-row:nth-child(1) span:nth-child(2) {
	animation-delay: 0.1s, 5.1s;
}
.sp-row:nth-child(1) span:nth-child(3) {
	animation-delay: 0.2s, 5.2s;
}
.sp-row:nth-child(1) span:nth-child(4) {
	animation-delay: 0.3s, 5.3s;
}
.sp-row:nth-child(1) span:nth-child(5) {
	animation-delay: 0.4s, 5.4s;
}
.sp-row:nth-child(4) span:nth-child(1) {
	animation-delay: 0.5s, 5.5s;
}
.sp-row:nth-child(4) span:nth-child(2) {
	animation-delay: 0.6s, 5.6s;
}
.sp-row:nth-child(5) span:nth-child(5) {
	animation-delay: 0.7s, 5.7s;
}
.sp-row:nth-child(5) span:nth-child(4) {
	animation-delay: 0.8s, 5.8s;
}
.sp-row:nth-child(5) span:nth-child(3) {
	animation-delay: 0.9s, 5.9s;
}
.sp-row:nth-child(5) span:nth-child(2) {
	animation-delay: 1s, 6s;
}
.sp-row:nth-child(5) span:nth-child(1) {
	animation-delay: 1.1s, 6.1s;
}
.sp-row:nth-child(2) span:nth-child(2) {
	animation-delay: 1.2s, 6.2s;
}
.sp-row:nth-child(2) span:nth-child(1) {
	animation-delay: 1.3s, 6.3s;
}
				
			
Давайте создадим небольшой псевдоэлемент, чтобы украсить большие пальцы кругом на заднем плане:
				
					.sp-row span:before {
	content: '';
	position: absolute;
	background-color: rgba(255,255,255,0.3);
	width: 100px;
	height: 100px;
	top: 50%;
	left: 50%;
	margin: -50px 0 0 -50px;
	border-radius: 50%;
}
				
			

Анимация

Теперь давайте посмотрим на анимации.

Первая анимация просто затемняет элемент, устанавливая непрозрачность от 1 до 0:

				
					@keyframes fadeOut{
	0%{
		opacity: 1;
	}
	100%{
		opacity: 0;
	}
}
				
			
fadeInColor будет затухать в элементе и устанавливать цвет фона rgba. Но уровень непрозрачности rgba будет равен 0 только тогда, когда непрозрачность самого элемента достигнет 0,5. В основном это сначала показывает содержимое элемента, а затем «исчезает» фон. Нам нужен второй заголовок:
				
					@keyframes fadeInColor{
	0%{
		opacity: 0;
		background-color: rgba(255,255,255,0);
	}
	50%{
		opacity: 0.5;
		background-color: rgba(255,255,255,0);
	}
	100%{
		opacity: 1;
		background-color: rgba(255,255,255,0.3);
	}
}
				
			
Следующая анимация просто заставляет элемент скользить и появляться с левой стороны:
				
					@keyframes slideIn{
	0%{
		opacity: 0;
		transform: translateX(-200px);
	}
	100%{
		opacity: 1;
		transform: translateX(0px);
	}
}
				
			
sizeDownMove уменьшит размер элемента и переместит его слева на 100 пикселей влево на 0 пикселей. Здесь мы также могли бы использовать translate, но так как наш элемент абсолютный, мы можем просто поиграть с левой стороной:
				
					@keyframes sizeDownMove{
	0%{
		transform: scale(1);
		left: 100px;
	}
	100%{
		transform: scale(0.6);
		left: 0px;
	}
}
				
			
Следующая анимация заставит элемент выглядеть сзади, масштабируя его от 0 до 1, а также устанавливая непрозрачность от 0 до 1:
				
					@keyframes fromBack{
	0%{
		transform: scale(0);
		opacity: 0;
	}
	100%{
		transform: scale(1);
		opacity: 1;
	}
}
				
			
И это все анимации к примеру 1! Давайте посмотрим на следующий пример, который будет немного проще, я обещаю!

Заглушка для кулинарного блога

Как насчет страницы-заставки, на которой мы последовательно показываем несколько продуманных заголовков? В этом примере мы просто покажем несколько предложений одно за другим с эффектом плавного размытия.

Html

У нас снова будет контейнер и блок содержимого с несколькими фреймами внутри, каждый для отдельного предложения. Кроме того, у нас будет глобус и элемент ссылки, который появится только в конце:
				
					<div class="sp-container">
	<div class="sp-content">
		<div class="sp-globe"></div>
		<h2 class="frame-1">It's destroying the planet</h2>
		<h2 class="frame-2">It's mass, mechanized murder</h2>
		<h2 class="frame-3">You can stop it</h2>
		<h2 class="frame-4">Now!</h2>
		<h2 class="frame-5">
			<span>Save the planet.</span> 
			<span>Love life.</span> 
			<span>Go vegan.</span>
		</h2>
		<a class="sp-circle-link" href="index2.html">Join us!</a>
	</div>
</div>
				
			
Посмотрим на стиль.

CSS

Каждый заголовок будет центрирован на экране, и мы заставим каждый из них появляться и исчезать с помощью анимации blurFadeInOut :
				
					.sp-container h2 {
	position: absolute;
	top: 50%;
	line-height: 100px;
	height: 100px;
	margin-top: -50px;
	font-size: 100px;
	width: 100%;
	text-align: center;
	color: transparent;
	animation: blurFadeInOut 3s ease-in backwards;
}
				
			
Определим задержки для каждого заголовка:
				
					.sp-container h2.frame-1 {
	animation-delay: 0s;
}
.sp-container h2.frame-2 {
	animation-delay: 3s;
}
.sp-container h2.frame-3 {
	animation-delay: 6s;
}
.sp-container h2.frame-4 {
	font-size: 200px;
	animation-delay: 9s;
}
				
			
У последнего не будет самой анимации, но вместо этого мы будем последовательно анимировать его промежутки:
				
					.sp-container h2.frame-5 {
	animation: none;
	color: transparent;
	text-shadow: 0px 0px 1px #fff;
}
.sp-container h2.frame-5 span {
	animation: blurFadeIn 3s ease-in 12s backwards;
	color: transparent;
	text-shadow: 0px 0px 1px #fff;
}
.sp-container h2.frame-5 span:nth-child(2) {
	animation-delay: 13s;
}
.sp-container h2.frame-5 span:nth-child(3) {
	animation-delay: 14s;
}
				
			
Глобус — это абсолютно позиционированный элемент с фоновым изображением. Мы добавим его через 14 секунд, то есть после завершения всех предыдущих анимаций. Он будет масштабирован, чтобы занять всю область содержимого:
				
					.sp-globe {
	position: absolute;
	width: 282px;
	height: 273px;
	left: 50%;
	top: 50%;
	margin: -137px 0 0 -141px;
	background: transparent url(../images/globe.png) no-repeat top left;
	animation: fadeInBack 3.6s linear 14s backwards;
	opacity: 0.3;
	transform: scale(5);
}
				
			
Ссылка «присоединяйтесь к нам» будет круговым элементом, который мы заставим появляться с поворотом:
				
					.sp-circle-link {
	position: absolute;
	left: 50%;
	bottom: 100px;
	margin-left: -50px;
	text-align: center;
	line-height: 100px;
	width: 100px;
	height: 100px;
	background: #fff;
	color: #3f1616;
	font-size: 25px;
	border-radius: 50%;
	animation: fadeInRotate 1s linear 16s backwards;
	transform: scale(1) rotate(0deg);
}
.sp-circle-link:hover {
	background: #85373b;
	color: #fff;
}
				
			

Анимация

А теперь давайте посмотрим на все анимации:

Первая анимация предназначена для всех заголовков, которые появятся, а затем исчезнут. Мы будем моделировать эффект размытия, играя с тенью текста и масштабом:

				
					@keyframes blurFadeInOut{
	0%{
		opacity: 0;
		text-shadow: 0px 0px 40px #fff;
		transform: scale(1.3);
	}
	20%,75%{
		opacity: 1;
		text-shadow: 0px 0px 1px #fff;
		transform: scale(1);
	}
	100%{
		opacity: 0;
		text-shadow: 0px 0px 50px #fff;
		transform: scale(0);
	}
}
				
			
Следующая анимация почти такая же, только мы не хотим, чтобы текст исчезал (это для последнего оставшегося заголовка):
				
					@keyframes blurFadeIn{
	0%{
		opacity: 0;
		text-shadow: 0px 0px 40px #fff;
		transform: scale(1.3);
	}
	50%{
		opacity: 0.5;
		text-shadow: 0px 0px 10px #fff;
		transform: scale(1.1);
	}
	100%{
		opacity: 1;
		text-shadow: 0px 0px 1px #fff;
		transform: scale(1);
	}
}
				
			
У земного шара будет следующая анимация, которая увеличивает масштаб элемента и сначала увеличивает, а затем уменьшает его непрозрачность:
				
					@keyframes fadeInBack{
	0%{
		opacity: 0;
		transform: scale(0);
	}
	50%{
		opacity: 0.4;
		transform: scale(2);
	}
	100%{
		opacity: 0.2;
		transform: scale(5);
	}
}
				
			
Следующая анимация предназначена для элемента ссылки. Он будет исчезать во время вращения:
				
					@keyframes fadeInRotate{
	0%{
		opacity: 0;
		transform: scale(0) rotate(360deg);
	}
	100%{
		opacity: 1;
		transform: scale(1) rotate(0deg);
	}
}
				
			

Заглушка для сбора контактов

В третьем примере мы будем экспериментировать с перемещением текста, чтобы представить продукт или приложение. В конце всех анимаций мы поместим элемент призыва к действию.

Html

У нас снова будут те же два контейнера, а также две основные обертки для каждой стороны. Цель состоит в том, чтобы разделить область и поиграть с текстами двух сторон:
				
					<div class="sp-container">
	<div class="sp-content">
		<div class="sp-wrap sp-left">
			<h2>
				<span class="sp-top">What if you wouldn't get</span> 
				<span class="sp-mid">spam</span> 
				<span class="sp-bottom">anymore?</span>
			</h2>
		</div>
		<div class="sp-wrap sp-right">
			<h2>
				<span class="sp-top">Wouldn't that be absolutely</span> 
				<span class="sp-mid">great<i>!</i><i>?</i></span> 
				<span class="sp-bottom">Yeah, it would!</span> 
			</h2>
		</div>
	</div>
	<div class="sp-full">
		<h2>A great way to get rid of spam!</h2>
		<a href="index3.html">Sign up now!</a>
	</div>
</div>
				
			

Css

Сначала мы хотим анимировать область содержимого, в которой есть псевдоэлемент, представляющий собой линию посередине. Мы «откроем» его и сделаем так, чтобы линия увеличивалась.

Затем мы хотим отобразить текст слева, сдвигая его справа последовательно. То же самое происходит и справа, только мы скользим слева. Промежутки с классом «sp-mid» будут иметь больший размер шрифта, и это те элементы, которые мы хотим по-прежнему показывать после затухания остального текста. Мы переместим два больших текста вверх и сожмем область содержимого, то есть уменьшим ее высоту, что приведет к уменьшению средней строки. После этого мы сделаем остальные элементы с кнопкой регистрации.

Контейнер будет иметь фиксированную ширину и высоту, а обертка содержимого сначала появится с открытой анимацией, а затем уменьшит ее высоту, применив сжатие . Последнее произойдет только после того, как весь остальной текст исчезнет, ​​отсюда и большая задержка анимации:

				
					.sp-container {
	width: 900px;
	height: 400px;
	position: relative;
	margin: 80px auto 0px auto;
}
.sp-content {
	width: 100%;
	height: 400px;
	position: relative;
	animation: 
		open 0.4s linear forwards, 
		squeeze 0.6s linear 5.5s forwards;
}
				
			
Строка посередине создается псевдоэлементом:
				
					.sp-content:after {
	content: '';
	width: 4px;
	background: #000;
	height: 100%;
	position: absolute;
	left: 50%;
}
				
			
Обертки для заголовков не будут показывать переполнения, поэтому мы гарантируем, что не увидим перекрытия при их скольжении:
				
					.sp-wrap {
	width: 400px;
	padding: 0px 25px;
	height: 100%;
	text-align: right;
	font-size: 70px;
	line-height: 80px;
	float: left;
	position: relative;
	background: #ffdd00;
	overflow: hidden;
}
				
			
Элементы h2 с промежутками внутри имеют следующий стиль:
				
					.sp-container h2 {
	color: #000;
	text-shadow: 0px 0px 1px rgba(0,0,0,0.9);
}
.sp-wrap span {
	display: block;
	background: #ffdd00;
	opacity: 0;
}
.sp-wrap span.sp-mid {
	opacity: 1;
}
.sp-container .sp-right h2 {
	color: #fff;
	text-shadow: 0px 0px 1px rgba(255,255,255,0.9);
}
.sp-wrap span.sp-mid {
	font-family: 'MisoBold';
	text-transform: uppercase;
	font-size: 160px;
	line-height: 130px;
	position: relative;
}
				
			
«sp-top» и «sp-bottom» будут скользить справа, а затем исчезать, а «sp-mid» будет двигаться вверх, а не просто исчезать:
				
					.sp-left span.sp-top {
	animation: 
		slideLeft 0.5s ease-in 0.6s backwards, 
		fadeOut 1s linear 4s backwards;
}
.sp-left span.sp-mid {
	animation: 
		slideLeft 0.5s ease-in 1s backwards, 
		moveUp 0.6s linear 5s forwards;
}
.sp-left span.sp-bottom {
	animation: 
		slideLeft 0.5s ease-in 1.4s backwards, 
		fadeOut 1s linear 4.2s backwards;
}
				
			
С правой стороны происходит то же самое, просто мы перемещаем элементы слева:
				
					.sp-right span {
	text-align: left;
}
.sp-right span.sp-top {
	animation: 
		slideRight 0.5s ease-in 2s backwards, 
		fadeOut 1s linear 4.4s backwards;
}
.sp-right span.sp-mid {
	animation: 
		slideRight 0.5s ease-in 2.4s backwards, 
		moveUp 0.6s linear 5s forwards;
}
.sp-right span.sp-bottom {
	animation: 
		slideRight 0.5s ease-in 3.2s backwards, 
		fadeOut 1s linear 4.6s backwards;
}
				
			
Знак вопроса будет поверх восклицательного знака, и когда мы переместим два средних диапазона вверх, мы исчезнем вопросительный знак, чтобы показать восклицательный знак:
				
					.sp-wrap i {
	position: absolute;
	background: #ffdd00;
	width: 60px;
}
.sp-wrap i:first-child {
	color: #000;
}
.sp-wrap i:last-child {
	opacity: 0;
	animation: fadeOut 1s linear 6s backwards;
}
				
			
Текст, появляющийся в конце, обернут sp-full, и мы сделаем его плавным и «увеличим» ссылку для регистрации:
				
					.sp-full {
	position: absolute;
	font-size: 67px;
	top: 142px;
	width: 700px;
	left: 145px;
	animation: fadeIn 1s linear 6.6s backwards;
}
.sp-full a {
	background: #000;
	color: #fff;
	border-radius: 4px;
	padding: 10px 40px;
	display: inline-block;
	font-size: 40px;
	margin-top: 40px;
	animation: zoomIn 0.7s ease-in-out 7s backwards;
}
.sp-full h2 {
	width: 400px;
	padding: 0px 50px 0px 0px;
	float: left;
	text-align: right;
}
.sp-full a:hover {
	opacity: 0.8;
}
				
			

Анимация

Теперь давайте посмотрим на анимации.

Первая анимация предназначена для «открытия» области содержимого. Этого мы добьемся, просто увеличив его высоту:

				
					@keyframes open{
	0%{
		transform: scale(1,0);
	}
	100%{
		transform: scale(1,1);
	}
}
				
			
Анимация сжатия на самом деле ничего не сжимает, потому что здесь мы не используем свойство масштабирования. Мы не хотим, потому что у нас все еще есть текст внутри области содержимого, когда мы его применяем. Итак, мы просто уменьшим его высоту:
				
					@keyframes squeeze{
	0%{
		height: 400px;
	}
	100%{
		height: 120px;
	}
}
				
			
Следующие две анимации предназначены просто для появления или исчезновения элементов:
				
					@keyframes fadeOut{
	0%{
		opacity: 1;
	}
	100%{
		opacity: 0;
	}
}
@keyframes fadeIn{
	0%{
		opacity: 0;
	}
	100%{
		opacity: 1;
	}
}
				
			
slideLeft и slideRight будут перемещать элемент с одной стороны на другую, переводя его:
				
					@keyframes slideLeft{
	0%{
		transform: translateX(120%);
	}
	100%{
		transform: translateX(0%);
	}
}
@keyframes slideRight{
	0%{
		transform: translateX(-120%);
	}
	100%{
		transform: translateX(0%);
	}
}
				
			
И moveUp переместит элемент вверх:
				
					@keyframes moveUp{
	0%{
		transform: translateY(0px);
	}
	100%{
		transform: translateY(-170px);
	}
}
				
			
Последняя анимация будет просто «увеличиваться» и масштабироваться от 0 до 1:
				
					@keyframes zoomIn{
	0%{
		transform: scale(0);
	}
	100%{
		transform: scale(1);
	}
}
				
			
И это все! Надеюсь, вам понравился этот эксперимент со мной и вы нашли его вдохновляющим!
Свежие записи
Команда RD

Команда RD и RMDIR позволяют удалять как каталоги, так и

Web-Дизайн
help2site
Как ускорить сайт на WordPress

В этой статье мы поговорим об ускорение времени загрузки сайта на CMS WordPress. Быстрая загрузка сайта необходима не только для удобства пользования сайтом посетителями, но

Web-Дизайн
help2site
Выпадающее главное меню в Drupal 7

В случае необходимости темизировать сайт на Drupal 7 на котором установлена тема которая не поддерживает опцию второго уровня для «Главное меню», и установка опции «Показать

iOS
help2site
iPhone или iPad работает медленно? Есть способы это исправить

Вы заметили, что после установки iOS 8 ваш iPhone или iPad стал медленнее соображать (особенно актуально для iPhone/iPad старших поколений), прочтите несколько не сложных способов описанных ниже и возможно один из них поможет

Web-Дизайн
help2site
Настройка виртуальных хостов

В этой заметке речь пойдет о настройке виртуальных хостов Apache под Windows. Я расскажу, что такое виртуальные хосты и для чего они используются. Подробные иллюстрации

Windows
help2site
Не запускается рабочий стол Windows 7

В процессе работы или при перезапуске компьютера некоторые пользователи сталкиваются с ситуацией, когда рабочий стол просто пропадает. На нем ничего не отображается, и работать за

Windows
help2site
Как убрать стрелки с ярлыков в Windows 7

Здравствуйте, дорогие читатели. В данной статье я расскажу вам о том как убрать стрелки с ярлыков в Windows 7. На данный момент существует несколько способов,

Программы
help2site
Установка Интернет Контроль Сервис на VirtualBox

VirtualBox (Oracle VM VirtualBox) — программный продукт виртуализации для операционных систем Microsoft Windows, Linux, FreeBSD, Mac OS X, Solaris/OpenSolaris, ReactOS, DOS и других, разработанный компанией Innotek, в настоящее

Web-Дизайн
help2site
ШОРТКОДЫ [SHORTCODES]

Доброго времени суток, дорогой читатель! В этой статье речь пойдет о шорткодах для WordPress, что это такое, где они используются, ну и конечно же примеры