Креативная страница «скоро открытие» на 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);
 }
}

 

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

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


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



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

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

Английская аббревиатура CMS расшифровывается как «Система управления контентом». О «сиэмэсках» говорят тогда, когда обсуждают сайты. Вы также можете встретить термины «система управления сайтом», «конструктор сайта», «движок сайта» — все они являются вариантами вольного перевода англоязычного понятия Content Management System. Попробуем разобраться, что это такое, и для чего оно необходимо.
В английском оригинале главное слово стоит в начале словосочетания, поэтому начнём с него.


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

Иногда при разработке возникает необходимость вставить ссылку на скайпнейм пользователя, чтобы при нажатии мы перешли к диалогу с владельцем этого скайпнейма. Визуально это может выглядеть так: Skype: studio25kadr

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


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

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


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

Хочу в данной статье немного расказать о создании нового сайта Image Club «PLATINUM» г.Саратов. Чтобы описать чем занимается Image Club, я приведу высказывания владелицы клуба Татьяны Бычковой:

«Почему «имидж клуб»? В основном, смена имиджа ассоциируется с началом новой жизни. Но поменять одну модную вещь на другую это не значит, что вы поменяли свой имидж. Начинать нужно со своего внутреннего мира, со своего взгляда на окружающий мир, работать не только над дефектами своей фигуры, и учиться правильно одеваться, но и получать от этого огромное достойное Вас (платиновое) удовольствие.»


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

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


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