Учимся создавать анимированные эффекты с помощью CSS3

2021-10-13 0 ∞

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

Необходимые ресурсы:

Картинки;
Шрифт Viga (Google-шрифт).

Скачать исходные файлы

Посмотреть демо-версию

Я хочу показать, как превратить изображение в форме квадрата (с закругленными углами) в окружность. При наведении на изображение его форма будет плавно меняться на окружность в течение 1 секунды. После этого мы установим для нее 50% радиуса, чтобы получить идеальный круг.

Разметка

HTML-код будет состоять из изображения, обернутого в <img > с заданным классом эффекта. Мы также используем класс morph (для эффекта превращения):

</pre>
<div class="morph img"><img alt="" src="img/image1.jpg" /></div>
<pre>

CSS-код

В нем мы зададим размер для изображения 200 на 200px, и границу белого цвета толщиной 10px. Также добавим радиус со значением 15px, чтобы слегка закруглить углы. Скроем все, что выходит за пределы видимого изображения. Для события mouse-over мы установим курсор pointer:

.img {
  width: 200px;
  height: 200px;
  border: 10px solid #fff;
  -webkit-border-radius: 15px;
   border-radius: 15px;
  overflow: hidden;
}

.img:hover {
  cursor: pointer;
}

Для анимации на сайте HTML эффекта превращения мы воспользуемся CSS3-свойством transition. Сначала укажем специфические браузерные свойства (-webkit, -moz, -ms, -o), и установим значение all 1s ease. Это позволит нам растянуть переход на 1 секунду при наведении на изображение курсора мыши.

Чтобы лучше понять, как работают переходы CSS, я предлагаю вам изучить приведенный ниже синтаксис:

transition: [transition-property] [transition-duration] [transition-timing-function];

[transition-property] применяется для указания конкретных стилей или свойств, которые нужно использовать (background, width и т. д). Мы используем all, чтобы применить эффект ко всем свойствам;
[transition-duration] отвечает за скорость анимации или перехода. В нашем примере используется значение 1s. Это значит, что анимация будет длиться 1 секунду. Учтите, что если скорость не будет определена, то у перехода не будет никакого эффекта;
[transition-timing-function] определяет, как будет вычисляться скорость во время перехода. Стандартным значением [transition-timing-function] является ease. Это значит, что эффект будет начинаться с медленного темпа, затем разгонится, а в конце снова слегка замедлится.

Далее мы добавляем стили для состояния mouse-over. Используем белую границу толщиной 10px, а также закругленные углы border-radius: 50%. За счет чего у нас получится идеальный круг при наведении курсора мыши. Мы также добавим тень блока, чтобы получить эффект свечения:

.morph {
  -webkit-transition: all 1s ease;
  -moz-transition: all 1s ease;
   -ms-transition: all 1s ease;
  -o-transition: all 1s ease;
   transition: all 1s ease;
}

.morph:hover {
  border: 10px solid #fff;
   border-radius: 50%;
  -webkit-box-shadow: 0 0 40px rgba(255,255,255,.6), inset 0 0 40px rgba(255,255,255,1);
  -moz-box-shadow: 0 0 40px rgba(255,255,255,.6), inset 0 0 40px rgba(255,255,255,1);
  box-shadow: 0 0 40px rgba(255,255,255,.6), inset 0 0 40px rgba(255,255,255,1);

}

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

Разметка

HTML-разметка будет той же, что и при эффекте превращения, но на этот раз вместе с классом img мы используем класс zoom (для эффекта увеличения):

</pre>
<div class="zoom img"><img alt="" src="img/image2.jpg" /></div>
<pre>

CSS-код

Мы указываем базовую ширину и высоту: 200 на 200 px. Затем снова воспользуемся эффектом перехода, но теперь установим время 2 секунды, что позволит придать выразительности при возникновении события mouse-over. Также мы добавим по 100 px к ширине и высоте, что позволит создать иллюзию увеличения.

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

.zoom img {
  width: 200px;
  height: 200px;
  -webkit-transition: all 2s ease;
  -moz-transition: all 2s ease;
  -ms-transition: all 2s ease;
  -o-transition: all 2s ease;
   transition: all 2s ease;
}

.zoom img:hover {
  width: 300px;
  height: 300px;
  -webkit-box-shadow: 0 0 40px rgba(255,255,255,.6), inset 0 0 40px rgba(255,255,255,1);
  -moz-box-shadow: 0 0 40px rgba(255,255,255,.6), inset 0 0 40px rgba(255,255,255,1);
  box-shadow: 0 0 40px rgba(255,255,255,.6), inset 0 0 40px rgba(255,255,255,1);
}

Позиция

Перед тем, как вставить анимацию на сайт, нужно понять ее сущность. В рамках этого эффекта мы слегка наклоним изображение. Эффект может выглядеть иначе в зависимости от установленной продолжительности анимации и градуса наклона. Обратите внимание, что длительность меняется путем изменения значения 0.3s.

Также с помощью transform можно указать, насколько сильно будет наклонено изображение. Свойство Transform позволяет изменять форму элемента, его размер и расположение. Можно изменять эффект за счет смены значения rotate (10deg) (10 градусов).

Разметка

По разметке все то же самое, за исключением того, что вместе с классом img мы укажем еще и класс tilt:

</pre>
<div class="tilt img"><img alt="" src="img/image3.jpg" /></div>
<pre>

CSS-код

Мы снова добавляем эффекты переходов (transition), но для начала указываем браузерные свойства. На этот раз нам нужно, чтобы все происходило медленно, и поэтому мы устанавливаем значение 0.3 миллисекунды.

Далее мы переходим к mouse-over, для которого используем свойство transform. Это свойство позволяет вращать, масштабировать, перемещать и искажать элементы.

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

.tilt {
  -webkit-transition: all 0.3s ease;
     -moz-transition: all 0.3s ease;
       -o-transition: all 0.3s ease;
      -ms-transition: all 0.3s ease;
          transition: all 0.3s ease;
}

.tilt:hover {
  -webkit-transform: rotate(10deg);
  -moz-transform: rotate(10deg);
  -ms-transform: rotate(10deg);
  -o-transform: rotate(10deg);
   transform: rotate(10deg);
  -webkit-box-shadow: 0 0 40px rgba(255,255,255,.6), inset 0 0 40px rgba(255,255,255,1);
  -moz-box-shadow: 0 0 40px rgba(255,255,255,.6), inset 0 0 40px rgba(255,255,255,1);
   box-shadow: 0 0 40px rgba(255,255,255,.6), inset 0 0 40px rgba(255,255,255,1);
}

Цвет

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

Затем мы устанавливаем значение перехода на all 1s ease, чтобы получить плавный эффект при наведении курсора мыши.

Разметка

Повторяем предыдущий HTML-код, но на этот раз применяем класс color вместе с классом img:

</pre>
<div class="color img"><img alt="" src="img/image4.jpg" /></div>
<pre>

CSS-код

Снова повторяем код перехода. Устанавливаем его на 1 секунду, а эффект тайминга на ease.

Что касается mouse-over, то для него мы воспользуемся свойством webkit-filter, а затем понизим цветность при помощи свойства grayscale. После этого добавим тень блока, чтобы получить уже привычный нам эффект анимации на сайте HTML:

.color {
 -webkit-transition: all 1s ease;
 -moz-transition: all 1s ease;
 -o-transition: all 1s ease;
 -ms-transition: all 1s ease;
  transition: all 1s ease;
}

.color:hover {
  -webkit-filter: grayscale(100%);
  -webkit-box-shadow: 0 0 40px rgba(255,255,255,.6), inset 0 0 40px rgba(255,255,255,1);
  -moz-box-shadow: 0 0 40px rgba(255,255,255,.6), inset 0 0 40px rgba(255,255,255,1);
   box-shadow: 0 0 40px rgba(255,255,255,.6), inset 0 0 40px rgba(255,255,255,1);

}

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

Размытие
-webkit-filter: blur(3px);
Сепия
-webkit-filter: sepia(100%);
Сепия
-webkit-filter: sepia(5%);
Инверсия
-webkit-filter: invert(0.2);
Цветность
-webkit-filter: saturate(50%);

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

Оживляем сайт при помощи Animate.css

Представляем вашему вниманию Animate.css – бесплатную CSS-библиотеку, созданную Дэном Эденом. Она состоит из 50 кроссбраузерных CSS-анимаций. Мы попробуем создать анимации при помощи Animate.css.

Необходимые ресурсы:

Reset.css;
Animate.css;
Raleway (Google-шрифт);
Open Sans (Google-шрифт);
Flat Icons (можно выбрать любую иконку);
Фоновые картинки.

Скачать исходные файлы

Посмотреть демо

Структура папок

Проект состоит из HTML-файлов, папки с картинками и папки для CSS-файлов:

index.html – наш основной файл;
images – папка для картинок;
css – папка для файлов стилей.

Над чем работаем:

Приступаем к работе

Перед тем, как вставить анимацию на сайт HTML и начать работу над разметкой, в шапку страницы добавим HTML5 doctype и несколько ссылок. Здесь будут представлены ссылки на CSS-файлы и библиотеки Google-шрифтов:

&lt;html&gt;
&lt;head&gt;
    &lt;meta charset="utf-8"&gt;

    &lt;title&gt;Bring Your Website to Life Using Animate.css&lt;/title&gt;
    &lt;meta content="width=device-width,initial-scale=1" name="viewport"&gt;
    &lt;!-- stylesheet --&gt;
    &lt;link href="css/reset.css" rel="stylesheet"&gt;
    &lt;link href="css/style.css" rel="stylesheet"&gt;
    &lt;link href="css/animate.css" rel="stylesheet"&gt;&lt;!-- font faces --&gt;
    &lt;link href='http://fonts.googleapis.com/css?family=Raleway:800,300' rel= 'stylesheet' type='text/css'&gt;
    &lt;link href= 'http://fonts.googleapis.com/css?family=Open+Sans:400italic,600italic,700italic,800italic,400,600,300,700,800' rel='stylesheet' type='text/css'&gt;
&lt;/head&gt;

HTML-код

В HTML мы обернем все содержимое в контейнер с ID wrapper:

&lt;body&gt;
&lt;div id="wrapper"&gt;
&lt;/div&gt;

Раздел Cover

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

&lt;section id="cover"&gt;

&lt;div class="container"&gt;
&lt;div class="fleft"&gt;
&lt;h3&gt;Just-add-water CSS animations&lt;/h3&gt;
&lt;h2&gt;Animate.CSS&lt;/h2&gt;

Animate.css – бесплатная CSS-библиотека, созданная Дэном Эденом. Она состоит из 50 кроссбраузерных CSS-анимаций, которые позволят не писать код вручную и анимировать элементы на странице:

&lt;/div&gt;

&lt;div class="fright"&gt;&lt;img align="right" id="browser" src= "images/browser.png"&gt;&lt;/div&gt;
&lt;br class="clear"&gt;
        &lt;/div&gt;
    &lt;/section&gt;

Раздел Features

В Features мы делаем то же самое, что и в предыдущем разделе анимации для сайта. Но на этот раз разделим каждую колонку при помощи классов column и one-third:

&lt;section id="features"&gt;
&lt;div class="container"&gt;
&lt;h2&gt;Что можно получить при помощи Animate.CSS&lt;/h2&gt;

&lt;div class="column-container"&gt;
&lt;div class="column one-third"&gt;
                    &lt;img alt="" src="images/icon_html5.png"&gt;

&lt;h4&gt;HTML5-совместимость&lt;/h4&gt;

Совместимая с HTML5 разметка с применением быстрых анимаций на CSS3
                &lt;/div&gt;

&lt;div class="column one-third"&gt;
                    &lt;img alt="" src="images/icon_animation.png"&gt;

&lt;h4&gt;Невероятные анимации&lt;/h4&gt;
Библиотека укомплектована множеством анимаций, которые вы сможете использовать в собственных проектах.
                &lt;/div&gt;

&lt;div class="column one-third last"&gt;
                    &lt;img alt="" src="images/icon_w3c.png"&gt;

&lt;h4&gt;Соответствие требованиям W3C&lt;/h4&gt;

Библиотека была разработана с учетом стандартов W3C.

                &lt;/div&gt;
            &lt;/div&gt;
        &lt;/div&gt;
    &lt;/section&gt;

Раздел Effects

В этом разделе анимации на сайте HTML мы отделим колонки при помощи классов column и one-fourth, так как здесь нам потребуется четыре колонки:

&lt;section id="effects"&gt;
&lt;div class="container"&gt;
&lt;h2&gt;Прикольные эффекты от Animate.CSS&lt;/h2&gt;

&lt;div class="column-container"&gt;
&lt;div class="column one-fourth"&gt;
                    &lt;img alt="" src="images/box1.png"&gt;

&lt;h4&gt;BOUNCE IN DOWN&lt;/h4&gt;
                &lt;/div&gt;

&lt;div class="column one-fourth"&gt;
                    &lt;img alt="" src="images/box2.png"&gt;

&lt;h4&gt;SWING&lt;/h4&gt;
                &lt;/div&gt;

&lt;div class="column one-fourth"&gt;
                    &lt;img alt="" src="images/box3.png"&gt;
&lt;h4&gt;SHAKE&lt;/h4&gt;
                &lt;/div&gt;

&lt;div class="column one-fourth last"&gt;
                    &lt;img alt="" src="images/box4.png"&gt;
&lt;h4&gt;FLASH&lt;/h4&gt;
                &lt;/div&gt;
            &lt;/div&gt;
        &lt;/div&gt;
    &lt;/section&gt;

Раздел About

В этом разделе мы обернем все в класс container:

&lt;section id="about"&gt;
&lt;div class="container"&gt;
&lt;h2&gt;Об ANIMATE.CSS&lt;/h2&gt;

Animate.css состоит из кроссбраузерных анимаций, созданных Дэном Эденом. Эффекты будут прекрасно смотреться в любых современных браузерах:

&lt;/div&gt;
    &lt;/section&gt;

Раздел Subscribe

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

&lt;section id="subscribe"&gt;
&lt;div class="container"&gt;
&lt;h2&gt;Подпишитесь на рассылку!&lt;/h2&gt;

Введите адрес вашей электронной почты, и мы обязательно пришлем вам что-нибудь интересное!
&lt;form action="" id="subscribe-form" method="post" name= "newsletter-form"&gt;

&lt;input id="subcribe_email" name= "subscribe_email" placeholder="Your email" type="email" value= ""&gt;

&lt;input id="subscribe_submit" name= "subscribe_submit" type="submit" value="Подписаться!"&gt;

            &lt;/form&gt;
        &lt;/div&gt;
    &lt;/section&gt;

Подвал

Сначала обернем в класс container и центрируем все на экране, используя файл style.css:

&lt;footer id="main-footer"&gt;
&lt;div class="container"&gt;

© 2014 &lt;a href= "http://www.1stwebdesigner.com/" target= "_blank"&gt;1stwebdesigner&lt;/a&gt;. Все права защищены

        &lt;/div&gt;
    &lt;/footer&gt;

&lt;/body&gt;
&lt;/html&gt;

Вот что у нас должно получиться:

CSS-код

Перед тем, как вставить анимацию на сайт, сначала добавим основные стили для базовых элементов:

body {
    font-family: 'Open Sans', sans-serif;
    font-weight: 300;
}

h2 {
    font-size: 48px;
    font-family: Raleway, sans-serif;
    font-weight: 800;
    margin-bottom: 20px;
    text-align: center;
    text-transform: uppercase;
}

h3 {
    font-family: 'Open Sans', sans-serif;
    text-transform: uppercase;
    font-size: 32px;
    font-weight: 300;
    margin-bottom: 30px;
}

h4 {
    font-family: 'Open Sans', sans-serif;
    font-size: 20px;
    font-weight: 800;
    text-transform: uppercase;
    margin-bottom: 10px;
    margin-top: 10px;
}

.fleft {
    float: left;
}

.fright {
    float: right;
}

.clear {
    clear: both;
}

.center {
    text-align: center;
}

#wrapper {
    width: 100%;
    overflow: hidden;
}

section {
    box-shadow: 0 -3px 0 rgba(0,0,0,0.1);
    position: relative;
}

Далее следуют стили для контейнеров и колонок анимации для сайта:

.container {
    margin: 0 auto;
    width: 960px;
    padding: 50px 0 80px;
}

.column-container {
    margin: 40px 0 -40px;
    overflow: hidden;
}

.column {
    float: left;
    padding: 0 40px 40px 0;
}

.column-container.last {
    margin-bottom: 0;
}

.column.last {
    padding-right: 0;
}

.column.one-half {
    width: 460px;
}

.column.one-third {
    width: 290px;
}

.column.two-thirds {
    width: 630px;
}

.column.one-fourth {
    width: 210px;
}

.column.three-fourths {
    width: 710px;
}

.column img {
    margin: 0 auto;
    display: block;
}

Раздел Cover будет оформлен собственной фоновой картинкой. Перед тем, как вставить анимацию на сайт, стилизуем каждый элемент внутри раздела cover:

#cover {
    background: url(../images/background.png) center top no-repeat;
    font-size: 1.3em;
}

#cover .container {
    padding: 240px 0 200px;
    color: #fff;
}

#cover p {
    padding-right: 508px;
    text-shadow: 2px 2px 2px rgba(150,150,150,1);
    font-family: 'Open Sans';
    text-align: left;
}

#cover h2 {
    font-size: 78px;
    line-height: 60px;
    margin: 20px 0;
    text-shadow: 2px 2px 2px rgba(150,150,150,1);
    text-align: left;
}

#cover h3 {
    margin: 0;
    text-shadow: 2px 2px 2px rgba(150,150,150,1);
}

#browser {
    margin-top: -270px;
}

Далее поработаем над стилизацией раздела Features. Задаем цвет фона #38bc94, а свойству color присваиваем белый цвет. Также нужно центрировать текст в каждой колонке примера анимации для сайта:

#features {
    background: #38bc94;
    color: #fff;
}

#features h4,#features p {
    text-align: center;
    margin-top: 15px;
}

Для раздела Effects мы добавляем #e9e9e9 в качестве цвета фона и центрируем текст в каждой колонке:

#effects {
	background: #e9e9e9;
	text-align: center;
	color: #898989;
}

#effects img {
	width: 100%;
}

После этого приступаем к оформлению раздела About:

#about {
    background: #3787bf;
	color: #fff;
    overflow: hidden;
}

#about h2,p {
    text-align: center;
}

Перед тем, как добавить анимацию на сайт и перейти к разделу Subscribe, давайте добавим стили для форм. Здесь мы определяем текстовые поля и кнопки:

button,input,textarea {
    font-size: 16px;
    max-width: 100%;
    margin: 0;
    border-radius: 0;
    vertical-align: baseline;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

textarea {
    overflow: auto;
    vertical-align: top;
}

input,textarea {
    background: #6e6e6e;
    background: rgba(169,169,169,0.3);
    border: 1px solid #f4f4f4;
	color: #fff;
    font-weight: 700;
    letter-spacing: 1px;
    padding: 12px;
    text-transform: uppercase;
}

input:focus,textarea:focus {
    outline: 0;
}

button:hover,button:focus,input[type=submit]:focus,input[type=submit]:hover {
    background: #419d81;
	color: #fff;
    outline: 0;
}

button,input[type=submit] {
    -webkit-appearance: button;
    cursor: pointer;
}

button,input[type=submit] {
    background: #38bc94;
    -webkit-transition: all .5s;
    -moz-transition: all .5s;
    transition: all .5s;
}

.form-field {
    position: relative;
}

Перед тем, как вставить анимацию на сайт HTML, добавим стили для раздела Subscribe. Мы добавим фоновую картинку и установим для каждой формы ширину и высоту:

#subscribe {
    background: url(../images/newsletter.png) no-repeat center center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
	color: #fff;
    padding: 40px 0;
}

#subscribe h2 {
    text-align: center;
	margin-top: 20px;
}

#subscribe-form .form-field {
    margin: 0 auto;
}

#subcribe_email {
    margin-top: 20px;
}

#subscribe-form .form-submit {
    height: 50px;
	width: 180px;
    display: block;
    margin: 20px auto 0;
}

#subcribe_email,#subscribe_submit {
	width: 100%;
    display: block;
    height: 55px;
}

Добавляем стили для подвала страницы:

footer {
    background: #484848;
	color: #fff;
}

footer .container {
    padding: 20px 0 10px;
    overflow: hidden;
}

p#footer-copyright {
    text-align: center;
}

footer a {
	color: #38bc94;
}

Медиа-запросы для адаптивного дизайна

Чтобы посадочная страница c анимацией для сайта хорошо смотрелась на разных экранах, нужно добавить конкретные стили для определенных размеров экрана. Скопируйте приведенный ниже код и вставьте его в CSS-файл:

@media all and (max-height: 1024px) and (max-width: 1024px) {

            	section .container,
            	footer .container {
                            	width: 900px;
            	}
            	#cover p {
                            	padding-right: 480px;
            	}
            	.column.one-third {
                            	width: 273px
            	}
            	.column.two-thirds {
                            	width: 587px
            	}
            	.column.one-half {
                            	width: 430px
            	}
            	.column.one-fourth {
                            	width: 195px
            	}
            	.column.three-fourths {
                            	width: 665px
            	}

}

@media all and (max-width: 1023px) {

            	section .container,
            	footer .container {
                            	width: 640px;
            	}

            	.column.one-third,
            	.column.two-thirds,
            	.column.one-half,
            	.column.one-fourth,
            	.column.three-fourths {
                            	width: 100%;
                            	padding-right: 0;
            	}
            	#cover p {
                            	padding-right: 220px;
            	}
            	#features .column.one-third {
                            	width: 300px;
            	}
            	#features .column.one-third:nth-child(odd) {
                            	padding-right: 40px;
            	}
            	#effects .column.one-fourth {
                            	width: 130px;
                            	padding-right: 40px;
            	}
            	#effects .column.one-fourth.last {
                            	padding-right: 0;
            	}

}

@media all and (max-width: 980px) {
.fleft{ float: none; }
.fright{ float; none; }
#browser{ display: none; }
#cover h3, #cover h2, #cover p{ text-align: center;
padding: 0;
margin: 20px auto;
}

}

@media all and (max-width: 640px) {

            	h2 {
                            	font-size: 2.8em
            	}
            	h3 {
                            	margin-bottom: 15px;
            	}
            	.column {
                            	padding-bottom: 20px;
            	}
            	.column-container {
                            	margin-bottom: 0;
            	}
            	.column-container {
                            	margin-top: 0;
            	}
            	section .container {
                            	width: 400px;
                            	padding: 50px 0;
                            	margin: 0 auto;
            	}

            	#wrapper {
                            	position: relative;
            	}
            	#wrapper.hidden {
                            	left: -240px;
            	}

            	footer .container {
                            	width: 400px;
                            	margin: 0 auto;
            	}
            	#cover {
                            	background-position: left bottom;
            	}
            	#cover .container {
                            	width: 400px;
                            	padding: 80px 0 40px;
                            	text-align: left;
            	}
            	#cover h2,
            	#cover h3,
            	#cover p {
                            	text-align: center;
                            	padding-right: 0;
            	}
            	#cover h2 {
                            	font-size: 54px;
                            	line-height: 44px;
            	}
            	#cover h3 {
                            	font-size: 23px;
            	}
            	#cover p {
                            	font-size: 16px;
            	}
            	.column.one-third,
            	.column.two-thirds,
            	.column.one-half,
            	.column.one-fourth,
            	.column.three-fourths {
                            	width: 100%;
                            	padding-right: 0;
            	}
            	#features .column.one-third {
                            	width: 100%;
            	}
            	#effects .column.one-fourth {
                            	width: 180px;
                            	padding-right: 40px;
            	}
            	#effects .column.one-fourth:nth-child(even){
                            	padding-right: 0;
            	}

            	#about-container {
                            	margin: 30px 0 20px;
            	}

}

@media all and (max-width: 480px) {

            	section .container,
            	footer .container,
            	#cover .container {
                            	width: 260px;
            	}
            	h2 {
                            	text-align: center;
            	}
            	#cover .container {
                            	padding: 150px 0 100px;
            	}
            	#effects .column.one-fourth {
                            	width: 125px;
                            	padding-right: 10px;
            	}
            	#about-container {
                            	text-align: center;
            	}

            	footer .container {
                            	text-align: center;
            	}
            	p#footer-copyright {
                            	float: none;
                            	margin: 0;
            	}

}

@media all and (max-width: 480px) {
   #cover h2 {
        font-size: 39px;
	}

    #browser {
        margin: 0 auto;
	}

}

@media all and (max-width: 320px) {
h2 {
    font-size: 20px;
}

#about h2 {
    font-size: 20px;
}

#subscribe h2 {
    font-size: 20px;
}
}

Анимируем элементы при помощи Animate.CSS

Приступим к анимации на сайте. В файле animate.css присутствует класс “animated”. Это значит, что его нужно указать в разметке. Посмотрите на этот пример:

&lt;h1 class="animated bounceInRight"&gt; &lt;/h1&gt;

Для этого руководства я использовал следующие классы анимации. Ознакомиться с полным перечнем классов можно на сайте Animate.css:

bounceInLeft;
rotateIn;
bounceInRight;
lightSpeedIn;
flipInY;
bounceInDown;
swing;
shake;
flash;
bounce;
tada;
wobble.

Задержка анимации

Рассмотрим, как добавить анимацию для сайта HTML с задержкой в раздел Cover. Сначала к тегу H3, расположенному под div с классом fleft, я добавляю анимационный класс bounceInLeft. Соответствующий код приведен ниже:

&lt;h3 class="animated bounceInLeft"&gt;Just-add-water CSS animations&lt;/h3&gt;

Далее я добавляю анимационный класс rotateIn к тегу H2, а также класс bounceInRight к тегу абзаца:

&lt;h2 class="animated rotateIn"&gt;Animate.CSS&lt;/h2&gt;

Добавим анимационный класс lightSpeedIn к изображению под div-элементом с классом fright:

&lt;img align="right" class="animated lightSpeedIn" id="browser" src="images/browser.png"&gt;&lt;/div&gt;

Чтобы добавить задержку анимации для сайта к каждому элементу, нужно открыть файл Animate.css и добавить задержку продолжительностью в 1 секунду к каждому анимационному классу:

-webkit-animation-delay: 1s;
    -moz-animation-delay: 1s;
    -ms-animation-delay: 1s;
    -o-animation-delay: 1s;
    animation-delay: 1s;

В качестве примера для нашего анимационного класса bounceInLeft предлагаю следующий код:

.bounceInLeft {
    -webkit-animation-name: bounceInLeft;
    animation-name: bounceInLeft;
    -webkit-animation-delay: 1s;
    -moz-animation-delay: 1s;
    -ms-animation-delay: 1s;
    -o-animation-delay: 1s;
    animation-delay: 1s;
}

В моем примере элементы отображаются неодновременно. Для этого я добавил еще по одной секунде задержки. Ниже представлен полный код:

.bounceInLeft {
    -webkit-animation-name: bounceInLeft;
    animation-name: bounceInLeft;
    -webkit-animation-delay: 1s;
    -moz-animation-delay: 1s;
    -ms-animation-delay: 1s;
    -o-animation-delay: 1s;
    animation-delay: 1s;
}

.bounceInRight {
    -webkit-animation-name: bounceInRight;
    animation-name: bounceInRight;
    -webkit-animation-delay: 3s;
    -moz-animation-delay: 3s;
    -ms-animation-delay: 3s;
    -o-animation-delay: 3s;
    animation-delay: 3s;
}

.lightSpeedIn {
    -webkit-animation-name: lightSpeedIn;
    animation-name: lightSpeedIn;
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
    -webkit-animation-delay: 4s;
    -moz-animation-delay: 4s;
    -ms-animation-delay: 4s;
    -o-animation-delay: 4s;
    animation-delay: 4s;
}

Анимация при наведении

Рассмотрим, как вставить анимацию на сайт к элементам при наведении на них курсора мыши. Сначала следует добавить анимационные классы к элементам, которые нужно “оживить”:

&lt;div class="column one-third animated flipInY"&gt;
        &lt;img alt="" src="images/icon_html5.png"&gt;

&lt;h4&gt;Совместимость с HTML5&lt;/h4&gt;

Совместимая с HTML5 разметка с применением невероятно быстрых анимаций на CSS3

    &lt;/div&gt;

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

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

.flipInY:hover {
    -webkit-backface-visibility: visible !important;
    -ms-backface-visibility: visible !important;
    backface-visibility: visible !important;
    -webkit-animation-name: flipInY;
    animation-name: flipInY;
    -webkit-animation-duration: 2s;
    -moz-animation-duration: 2s;
    -ms-animation-duration: 2s;
    -o-animation-duration: 2s;
    animation-duration: 2s;
    -moz-animation-fill-mode: both;
    -ms-animation-fill-mode: both;
    -o-animation-fill-mode: both;
    animation-fill-mode: both;
    cursor: pointer;
    cursor: pointer;
}

.flipInY:hover {
  -webkit-backface-visibility: visible !important;
  -ms-backface-visibility: visible !important;
  backface-visibility: visible !important;
  -webkit-animation-name: flipInY;
  animation-name: flipInY;
  -webkit-animation-duration: 2s;
   	-moz-animation-duration: 2s;
    	-ms-animation-duration: 2s;
     	-o-animation-duration: 2s;
        animation-duration: 2s;
         -moz-animation-fill-mode: both;
        -ms-animation-fill-mode: both;
         -o-animation-fill-mode: both;
            animation-fill-mode: both;
           cursor: pointer;

}

В этом примере анимации для сайта я также использовал свойство animation-duration, которое позволяет контролировать продолжительность анимации. Учтите, что в примере также используется animation-fill-mode. Это свойство определяет, какие стили будут применяться к элементу в то время, пока не воспроизводится анимация.

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

В завершение

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