Креативная страница «скоро открытие» на CSS3
Технология CSS3 открыла нам бесчисленные возможности, и сегодня мы хотим представить вам руководство по разработке привлекательных страниц, предназначенных для оповещения посетителей о скором открытии веб-сайта, а также о создании заставок на сайт, реализованных посредством анимации в CSS3. Разрабатывая сайт необходимо создать красивую заглушку, чтобы пользователи могли подписаться на новости когда откроется сайт. В данном уроке мы рассмотрим как это креативно осуществить, не затрачивая при этом особых усилий.
Дабы сократить объемы руководства, мы опустили использование CSS-префиксов производителей браузеров, но они прописаны в файле, который вы можете скачать с этой страницы. Итак, приступим!
Пример 1.
В первом примере у нас есть несколько элементов. Шаблон данного примера будет выполнять задачу страницы-оповещения о скором открытии ресурса.
Шаг 1. HTML:
Здесь у нас есть основной контейнер с областью контента. Внутри него мы расположим несколько ячеек для миниатюр.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 |
<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.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
.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 секунд. Мы вернемся к данной анимации позже. Стрелка также будет позиционирована абсолютно, и к ней будет задано фоновое изображение:
1 2 3 4 5 6 7 8 9 10 11 |
.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, и мы разместим его в правой части экрана:
1 2 3 4 5 6 7 8 |
.sp-side { width: 460px; height: 300px; position: absolute; right: 10px; top: 25%; animation: slideIn 0.6s ease-in-out 6s backwards; } |
Стрелка и сторонний элемент будет выезжать, но мы вернемся к этому позже. Теперь давайте оформим заголовок:
1 2 3 4 5 6 7 8 9 |
.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; } |
…а также оболочку для формы ввода и кнопки:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 |
.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; } |
Теперь давайте обратимся к наполнению основной области контента. Для начала мы оформим заголовок, которому будет задана анимация, за счет которой он будет появляться сзади, а затем исчезать:
1 2 3 4 5 6 7 8 9 10 11 12 13 |
.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; } |
Второй заголовок будет появляться чуть позже, после того как первый исчезнет:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
.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, будет появляться, а затем исчезать:
1 2 3 4 5 6 7 8 9 10 11 |
.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; } |
Теперь давайте оформим ячейки для миниатюр:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
.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, что создаст впечатление, будто они «приезжают» изнутри экрана. Далее нам нужно, чтобы они исчезли:
1 2 3 4 5 6 7 8 9 10 11 |
.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-я ячейка находится в правой части страницы, так что мы можем следовать ходу часовой стрелки:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 |
.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; } |
Давайте сделаем небольшой псевдо элемент с окружностью на фоне для украшения миниатюр:
1 2 3 4 5 6 7 8 9 10 11 |
.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:
1 2 3 4 5 6 7 8 |
@keyframes fadeOut{ 0%{ opacity: 1; } 100%{ opacity: 0; } } |
fadeInColor будет отвечать за появление элемента, и позволит нам задавать параметр цвета и прозрачности RGBa. Но уровень плотности отображения RGBa будет достигать лишь 0, когда уровень плотности отображения самого элемента будет достигать отметки в 0,5. Это позволит нам отобразить сначала контент, а затем «явить» фон. Перейдем ко второму заголовку:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
@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); } } |
Следующая анимация отвечает за скольжение элемента из левой части экрана:
1 2 3 4 5 6 7 8 9 10 |
@keyframes slideIn{ 0%{ opacity: 0; transform: translateX(-200px); } 100%{ opacity: 1; transform: translateX(0px); } } |
sizeDownMove уменьшит элемент и сместит его с позиции left 100px к left 0px. Здесь мы также можем применить translate, но, так как наш элемент позиционирован абсолютно, мы можем «играть» лишь по левой стороне:
1 2 3 4 5 6 7 8 9 10 |
@keyframes sizeDownMove{ 0%{ transform: scale(1); left: 100px; } 100%{ transform: scale(0.6); left: 0px; } } |
Следующая анимация отвечает за появление элемента из внутренней части видимой области за счет изменения значения с 0 до 1. Уровень плотности отображения также меняется с 0 на 1:
1 2 3 4 5 6 7 8 9 10 |
@keyframes fromBack{ 0%{ transform: scale(0); opacity: 0; } 100%{ transform: scale(1); opacity: 1; } } |
И на этом мы завершили всю анимацию в первом примере! Теперь давайте перейдем к следующим интересным примерам. Они будут полегче!
Пример 2.
В данном примере мы просто отобразим предложения одно за другим, которые будут оформлены красивым эффектом размытия. Здесь у нас снова будет контейнер и div с контентом, в котором будет размещено несколько кадров – каждый для отдельного предложения. Вдобавок у нас будет глобус и ссылка, которые появятся лишь в самом конце:
Шаг 1. HTML:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<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:
1 2 3 4 5 6 7 8 9 10 11 12 |
.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; } |
Давайте укажем задержку для каждого заголовка:
1 2 3 4 5 6 7 8 9 10 11 12 13 |
.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-элементы:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
.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 секунд с момента завершения остальной анимации. Размеры его будут такими, чтобы она занял всю область контента:
1 2 3 4 5 6 7 8 9 10 11 12 |
.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» («присоединяйтесь») будет реализована в виде окружности, которая, вращаясь, появится:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
.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:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
@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); } } |
Следующая анимация почти такая же, только нам не нужно, чтобы текст исчезал (это нужно для последнего заголовка, который остается):
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
@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); } } |
Глобусу будет задана та же анимация, которая масштабирует элемент, и сначала повышает, а затем понижает уровень плотности отображения:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
@keyframes fadeInBack{ 0%{ opacity: 0; transform: scale(0); } 50%{ opacity: 0.4; transform: scale(2); } 100%{ opacity: 0.2; transform: scale(5); } } |
Следующая анимация нужна для ссылки. Она сделает так, что ссылка появится, при этом вращаясь:
1 2 3 4 5 6 7 8 9 10 |
@keyframes fadeInRotate{ 0%{ opacity: 0; transform: scale(0) rotate(360deg); } 100%{ opacity: 1; transform: scale(1) rotate(0deg); } } |
Теперь перейдем к последнему эффекту, но не менее интересному.
Пример 3.
В третьем примере мы поэкспериментируем с передвижением текста для предложения продукции или приложения. В конце анимации посетители будут наблюдать элемент, призывающий к действию.
Шаг 1. HTML:
Здесь у нас снова имеется 2 контейнера, и 2 оболочки. Наша цель – разделить область и обыграть тексты обеих сторон:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
<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» будут иметь увеличенный размер шрифта, и это именно те элементы, которые должны остаться, когда остальные элементы исчезнут.
У контейнера будет фиксированная ширина и высота, а оболочка контента сначала появится в сопровождении заданной анимации, а затем уменьшится в размере за счет применения сжатия. Последнее действие будет реализовано только после того, как исчезнут остальные тексты – отсюда и получается длительная задержка анимации:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
.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; } |
Линия в середине будет создана за счет псевдо элемента:
1 2 3 4 5 6 7 8 |
.sp-content:after { content: ''; width: 4px; background: #000; height: 100%; position: absolute; left: 50%; } |
Оболочки заголовков не будут отображать то, что окажется лишним, поэтому мы можем быть уверенными в том, что при скольжении не случится какого-либо наложения:
1 2 3 4 5 6 7 8 9 10 11 12 |
.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’ами внутри будут оформлены следующими стилями:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
.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» будет скользить вверх вместо того чтобы исчезнуть:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
.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; } |
В правой части будет происходить то же самое, только в зеркальном порядке:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
.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’а вверх, вопросительный знак исчезнет, оставив после себя восклицательный:
1 2 3 4 5 6 7 8 9 10 11 12 |
.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, и мы сделаем так, чтобы он постепенно появлялся и «увеличивал» ссылку на подписку:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
.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; } |
Первая анимация отвечает за «открытие» области контента. Это можно реализовать за счет увеличения её высоты:
1 2 3 4 5 6 7 8 |
@keyframes open{ 0%{ transform: scale(1,0); } 100%{ transform: scale(1,1); } } |
Анимация сжатия (squeeze) на самом деле ничего не сжимает, так как здесь мы не используем параметр масштабирования. Нам это не нужно, так как в момент применения данного эффекта у нас все еще есть немного текста внутри области контента. Так что, мы просто уменьшим его высоту:
1 2 3 4 5 6 7 8 |
@keyframes squeeze{ 0%{ height: 400px; } 100%{ height: 120px; } } |
Следующие две анимации отвечают за появление и исчезновение элементов:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
@keyframes fadeOut{ 0%{ opacity: 1; } 100%{ opacity: 0; } } @keyframes fadeIn{ 0%{ opacity: 0; } 100%{ opacity: 1; } } |
slideLeft и slideRight перемещают элементы с одного места на другое:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
@keyframes slideLeft{ 0%{ transform: translateX(120%); } 100%{ transform: translateX(0%); } } @keyframes slideRight{ 0%{ transform: translateX(-120%); } 100%{ transform: translateX(0%); } } |
И moveUP перемещает элемент вверх:
1 2 3 4 5 6 7 8 |
@keyframes moveUp{ 0%{ transform: translateY(0px); } 100%{ transform: translateY(-170px); } } |
Последняя анимация просто «увеличивает» элемент за счет масштабирования от 0 до 1:
1 2 3 4 5 6 7 8 |
@keyframes zoomIn{ 0%{ transform: scale(0); } 100%{ transform: scale(1); } } |
Вот и все. Готово!
Материал взят из зарубежного источника. И представлен исключительно в ознакомительных целях.
Читайте также:
Опубликовал Cooper 18.09.2012 в 14:53, в категории CSS. Вы можете следить за комментариями через RSS 2.0. Вы можете перейти в конец записи и оставить комментарий. Пинги запрещены. |