Автор

Креативная страница «скоро открытие» на CSS3

Креативная страница «скоро открытие» на CSS3


 

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

 

ДЕМО
ИСХОДНИКИ

 

Дабы сократить объемы руководства, мы опустили использование CSS-префиксов производителей браузеров, но они прописаны в файле, который вы можете скачать с этой страницы. Итак, приступим!

 

Пример 1.

 

 

В первом примере у нас есть несколько элементов. Шаблон данного примера будет выполнять задачу страницы-оповещения о скором открытии ресурса.

 

Шаг 1. HTML:

 

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

<div class="sp-container">
 <div class="sp-content">
 <div class="sp-row">
 <span><img src="images/example1/1.png" /></span>
 <span><img src="images/example1/2.png" /></span>
 <span><img src="images/example1/3.png" /></span>
 <span><img src="images/example1/4.png" /></span>
 <span><img src="images/example1/5.png" /></span>
 </div>
 <div class="sp-row sp-side-row">
 <span><img src="images/example1/11.png" /></span>
 <span><img src="images/example1/12.png" /></span>
 </div>
 <div class="sp-row sp-content-row">
 <h1>Coming Soon</h1>
 <h2>Desinger 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 src="images/example1/13.png" /></span>
 <span><img src="images/example1/14.png" /></span>
 </div>
 <div class="sp-row">
 <span><img src="images/example1/6.png" /></span>
 <span><img src="images/example1/7.png" /></span>
 <span><img src="images/example1/8.png" /></span>
 <span><img src="images/example1/9.png" /></span>
 <span><img 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>

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

 

Шаг 2. CSS

 

Основная идея данного примера заключается в следующем цикле анимации:

 

Миниатюры появляются при помощи fromBack.
Первый H1 появляется при помощи fromBack.
Подзаголовок H2 появляется при помощи fromBack.
Первый H1 и подзаголовок H2 исчезают при помощи fadeOut.
Миниатюры начинают последовательно исчезать посредством fadeOut и второй H1 появляется при помощи fadeInColor. Также, контент двигается в левую сторону и немного уменьшается посредством sizeDownMove.
Стрелка и сторонний контент выезжают с левой стороны посредством 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;
}

Сторонний элемент будет содержать поле ввода e-mail, и мы разместим его в правой части экрана:

.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;
}

Каждый из span’ов для миниатюр буде также появляться за счет увеличения в размере от значения 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 уменьшит элемент и сместит его с позиции left 100px к left 0px. Здесь мы также можем применить 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;
 }
}

И на этом мы завершили всю анимацию в первом примере! Теперь давайте перейдем к следующим интересным примерам. Они будут полегче!

 

Пример 2.

 

 

В данном примере мы просто отобразим предложения одно за другим, которые будут оформлены красивым эффектом размытия. Здесь у нас снова будет контейнер и div с контентом, в котором будет размещено несколько кадров – каждый для отдельного предложения. Вдобавок у нас будет глобус и ссылка, которые появятся лишь в самом конце:

 

Шаг 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>

Давайте перейдем к стилизации.

 

Шаг 2. 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;
}

У последнего кадра не будет анимации, но вместо этого мы анимируем span-элементы:

.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);
}

Ссылка «join us» («присоединяйтесь») будет реализована в виде окружности, которая, вращаясь, появится:

.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;
}

Первая анимация предназначена для всех заголовков, которые должны появиться и исчезнуть. Мы имитируем эффект размытия за счет параметров text-shadow и scale:

@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);
 }
}

 

Теперь перейдем к последнему эффекту, но не менее интересному.

 

Пример 3.

 

 

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

 

Шаг 1. HTML:

 

Здесь у нас снова имеется 2 контейнера, и 2 оболочки. Наша цель – разделить область и обыграть тексты обеих сторон:

<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>

Давайте перейдем к стилизации.

 

Шаг 2. CSS

 

Сначала нам нужно анимировать область контента, в которой есть псевдо элемент, представляющий собой линию в середине. Затем то же самое происходит и с правой стороны, только текст должен выдвигаться от левой стороны. Span’ы с классом «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 со span’ами внутри будут оформлены следующими стилями:

.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;
}

Знак вопроса будет расположен поверх восклицательного знака, и когда мы сдвинем два центральных span’а вверх, вопросительный знак исчезнет, оставив после себя восклицательный:

.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);
 }
}

Анимация сжатия (squeeze) на самом деле ничего не сжимает, так как здесь мы не используем параметр масштабирования. Нам это не нужно, так как в момент применения данного эффекта у нас все еще есть немного текста внутри области контента. Так что, мы просто уменьшим его высоту:

@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);
 }
}

 

Вот и все. Готово!

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

Многие материалы на сайте взяты из блогов: "Все для веб-дизайнера Rudebox", "A free library of HTML, CSS, JS nuggets Codyhouse" - полностью переведен и представлен в ознакомительных целях!

vk.com/club.ssdru

Подписывайтесь на нашу группу в контакте vk.com/club.ssdru



Статьи по темеCSS3

Креативная страница «скоро открытие» на CSS3

Мировая глобализация операционной системы от майков продолжатся, дизайнеры уже массово переделывают свой дизайн под стиль Metro UI, кому-то он нравится, у других-вызывает отвращение, но тем не менее что-то новое всегда имеет место быть. В данном уроке мы рассмотрим как создать замечательную галерею с эффектом увеличения и слайдом в стиле дизайна Metro UI. Галерея будет полностью копировать интерфейс пуска нашумевшей восьмерки. Кроме этого мы добавили настройки, где вы сможете применить различные эффекты.


Креативная страница «скоро открытие» на CSS3

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


Креативная страница «скоро открытие» на CSS3

Модальное окно «product quick view», анимированное с использованием CSS3 и Velocity.js, которое обеспечивает пользователю быстрый доступ к основной информации о продукте.


Креативная страница «скоро открытие» на CSS3

Вкладки стали весьма популярными в структуре сайта, они помогают экономить место на ресурсе и привлекать пользователей своей анимацией при смене закладок. В данном уроке мы рассмотрим процесс организации вкладок для компактного вывода содержания. Для создания таких вкладок и организации внешнего вида, будет использоваться техника CSS3, и подключенная библиота jQuery с репозитория Google, чтобы ускорить загрузку сайта. А сам функционал реализуется несколькими строками JavaScript кода. Такие вкладки будут отлично дополнять дизайн любого сайта..


Раскрутка в соцсетях

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


Перейти в Блог

Надёжный хостинг

С нами хостинг удобен и прост, как диван у вас дома. Вы с комфортом размещаетесь, а все внутренние пружины мы берем на себя.

Бесплатный тестовый период, ежедневные бэкапы, неограниченный трафик, акции с бонусами... Конечно, у нас все это есть.


Перейти на хостинг

О КОМПАНИИ

Studio Design существует с 2001 года. Основной нашей деятельностью до 2007 года было видеопроизводство ( видеореклама и документальные фильмы, о чем подробно описано в нашем блоге ). С 2007 года, вот уже как лет, наша основная специфика - это создание сайтов для бизнеса или частной деятельности, веб дизайн, а также поддержка и администрирование готовых проектов. Каждая выполненная нами работа - это уникальный, а самое главное, адаптивный под все современные мобильные устройства дизайн сайта. Мы готовы создать сайт с нуля для каждого клиента с любого уголка России! Мы поможем Вам в создании, как одностраничных сайтов – визиток, так и крупных интернет магазинов или корпоративных сайтов. А все наши работы, большинство из которых действуют и по сей день!

Close

Целовальников Сергей


Веб-дизайн, HTML5, CSS3, jQuery, JavaScript, Верстка.

Верстальщик с большим опытом работы. Занимаюсь созданием сайтов с 2005 года. Постоянно обучаюсь и совершенствую свои навыки. Веду свои проекты, в том числе и данный блог.

Close