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

Сегодня я хочу познакомить вас с различными эффектами анимации для сайта, которые можно реализовать при помощи 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);

}
CSS-код

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

Разметка

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);
}
CSS-код

Позиция

Перед тем, как вставить анимацию на сайт, нужно понять ее сущность. В рамках этого эффекта мы слегка наклоним изображение. Эффект может выглядеть иначе в зависимости от установленной продолжительности анимации и градуса наклона. Обратите внимание, что длительность меняется путем изменения значения 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);
}
CSS-код

Цвет

В качестве примера мы попробуем сбросить все цвета и создать нечто вроде монохромного эффекта при наведении. Это можно реализовать при помощи 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);

}
CSS-код

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

Размытие
-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 – папка для файлов стилей.

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

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

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

Перед тем, как вставить анимацию на сайт 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;

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

Добавим анимационный класс 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-анимации не будут оказывать влияния на элементы до тех пор, пока не будет запущен первый ключевой кадр. Эффект будет прекращаться после воспроизведения последнего кадра.

В завершение

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

Пожалуйста, опубликуйте свои комментарии по текущей теме статьи. За комментарии, подписки, дизлайки, лайки, отклики низкий вам поклон!

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

Валентин Сейидовавтор-переводчик статьи «How to Create Smooth CSS3 Animation Styles and Effects with Ease»