Advertisement
  1. Web Design
  2. Animation

Добавление привлекательности вашей веб-анимации

Scroll to top
Read Time: 13 min

Russian (Pусский) translation by Max Zhuravlov (you can also view the original English article)

Final product imageFinal product imageFinal product image
What You'll Be Creating

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

Привлекательность

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

The Illusion of Life Disney AnimationThe Illusion of Life Disney AnimationThe Illusion of Life Disney Animation
12 основных принципов анимации изложены в Анимация Диснея: иллюзия жизни.

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

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

Карточка профиля

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

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

Что бы сделать его привлекательнее мы используем несколько анимаций. Различные части анимации демонстрирую каждый элемент по порядку. Это помогает пользователю понять взаимосвязь между элементом по которому был осуществлен клик и контентом. Порядок анимаций позволяет глазу следовать к нижним иконкам.

HTML код

Для начала нам нужна кнопка для нажатия и карточка для демонстрации Карточка профиля будет скрыта при загрузке страницы.

1
  <button class="show-card">
2
    <img src="https://avatars2.githubusercontent.com/u/853536?v=3&amp;s=48">
3
    Press here
4
  </button>
5
  <article class="card">
6
    <section class="close">
7
      <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="14" height="14" viewBox="0 0 32 32">
8
        <path d="M31.708 25.708c-0-0-0-0-0-0l-9.708-9.708 9.708-9.708c0-0 0-0 0-0 0.105-0.105 0.18-0.227 0.229-0.357 0.133-0.356 0.057-0.771-0.229-1.057l-4.586-4.586c-0.286-0.286-0.702-0.361-1.057-0.229-0.13 0.048-0.252 0.124-0.357 0.228 0 0-0 0-0 0l-9.708 9.708-9.708-9.708c-0-0-0-0-0-0-0.105-0.104-0.227-0.18-0.357-0.228-0.356-0.133-0.771-0.057-1.057 0.229l-4.586 4.586c-0.286 0.286-0.361 0.702-0.229 1.057 0.049 0.13 0.124 0.252 0.229 0.357 0 0 0 0 0 0l9.708 9.708-9.708 9.708c-0 0-0 0-0 0-0.104 0.105-0.18 0.227-0.229 0.357-0.133 0.355-0.057 0.771 0.229 1.057l4.586 4.586c0.286 0.286 0.702 0.361 1.057 0.229 0.13-0.049 0.252-0.124 0.357-0.229 0-0 0-0 0-0l9.708-9.708 9.708 9.708c0 0 0 0 0 0 0.105 0.105 0.227 0.18 0.357 0.229 0.356 0.133 0.771 0.057 1.057-0.229l4.586-4.586c0.286-0.286 0.362-0.702 0.229-1.057-0.049-0.13-0.124-0.252-0.229-0.357z" fill="#aaa"></path>
9
      </svg>
10
    </section>
11
    <section class="details">
12
      <h2 class="name">Donovan Hutchinson</h2>
13
      <p class="description">Donovan is a Dublin-based front-end developer with a passion for CSS, animation and making the web fun.</p>
14
    </section>
15
    <section class="headshot">
16
      <img src="https://avatars2.githubusercontent.com/u/853536?v=3&amp;s=280">
17
    </section>
18
    <section class="icon-bar">
19
      <ul>
20
        <li>
21
          <a href="http://cssanimation.rocks">
22
            <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="32" height="32" viewBox="0 0 32 32">
23
              <path d="M32 19l-6-6v-9h-4v5l-6-6-16 16v1h4v10h10v-6h4v6h10v-10h4z" fill="#fff"></path>
24
            </svg>
25
          </a>
26
        </li>
27
        <li>
28
          <a href="https://twitter.com/cssanimation">
29
            <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="32" height="32" viewBox="0 0 32 32">
30
              <path d="M32 6.076c-1.177 0.522-2.443 0.875-3.771 1.034 1.355-0.813 2.396-2.099 2.887-3.632-1.269 0.752-2.674 1.299-4.169 1.593-1.198-1.276-2.904-2.073-4.792-2.073-3.626 0-6.565 2.939-6.565 6.565 0 0.515 0.058 1.016 0.17 1.496-5.456-0.274-10.294-2.888-13.532-6.86-0.565 0.97-0.889 2.097-0.889 3.301 0 2.278 1.159 4.287 2.921 5.465-1.076-0.034-2.088-0.329-2.974-0.821-0.001 0.027-0.001 0.055-0.001 0.083 0 3.181 2.263 5.834 5.266 6.437-0.551 0.15-1.131 0.23-1.73 0.23-0.423 0-0.834-0.041-1.235-0.118 0.835 2.608 3.26 4.506 6.133 4.559-2.247 1.761-5.078 2.81-8.154 2.81-0.53 0-1.052-0.031-1.566-0.092 2.905 1.863 6.356 2.95 10.064 2.95 12.076 0 18.679-10.004 18.679-18.68 0-0.285-0.006-0.568-0.019-0.849 1.283-0.926 2.396-2.082 3.276-3.398z" fill="#fff"></path>
31
            </svg>
32
          </a>
33
        </li>
34
        <li>
35
          <a href="https://github.com/cssanimation">
36
            <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="32" height="32" viewBox="0 0 32 32">
37
              <path d="M0 17.388c0 1.45 0.136 2.762 0.407 3.935s0.647 2.193 1.127 3.059 1.090 1.627 1.831 2.285c0.741 0.657 1.544 1.195 2.41 1.612s1.854 0.756 2.965 1.017c1.111 0.261 2.245 0.443 3.403 0.548s2.431 0.156 3.818 0.156c1.398 0 2.676-0.052 3.834-0.156s2.295-0.287 3.411-0.548 2.11-0.6 2.981-1.017c0.871-0.417 1.68-0.954 2.425-1.612s1.361-1.419 1.846-2.285 0.863-1.886 1.134-3.059c0.271-1.174 0.407-2.486 0.407-3.935 0-2.587-0.866-4.825-2.597-6.713 0.094-0.25 0.18-0.535 0.258-0.853s0.151-0.772 0.219-1.361c0.068-0.589 0.042-1.27-0.078-2.042s-0.342-1.56-0.665-2.363l-0.235-0.047c-0.167-0.031-0.441-0.023-0.822 0.024s-0.824 0.141-1.33 0.282c-0.506 0.141-1.158 0.412-1.956 0.814s-1.64 0.905-2.527 1.51c-1.523-0.417-3.615-0.626-6.275-0.626-2.65 0-4.736 0.209-6.259 0.626-0.887-0.605-1.734-1.108-2.543-1.51s-1.453-0.673-1.933-0.814c-0.48-0.141-0.928-0.232-1.346-0.274s-0.681-0.055-0.79-0.039-0.196 0.034-0.258 0.055c-0.323 0.803-0.545 1.591-0.665 2.363s-0.146 1.453-0.078 2.042 0.141 1.043 0.219 1.361c0.078 0.318 0.164 0.602 0.258 0.853-1.732 1.888-2.598 4.126-2.598 6.713zM3.928 21.315c0-1.502 0.683-2.879 2.050-4.131 0.407-0.376 0.881-0.66 1.424-0.853s1.155-0.302 1.839-0.329c0.683-0.026 1.338-0.021 1.964 0.016s1.398 0.086 2.316 0.149c0.918 0.063 1.711 0.094 2.379 0.094s1.46-0.031 2.378-0.094c0.918-0.063 1.69-0.112 2.316-0.149s1.28-0.042 1.964-0.016c0.683 0.026 1.296 0.136 1.839 0.329s1.017 0.477 1.424 0.853c1.367 1.231 2.050 2.608 2.050 4.131 0 0.897-0.112 1.693-0.337 2.386s-0.511 1.275-0.861 1.745-0.834 0.868-1.455 1.197c-0.621 0.329-1.226 0.582-1.815 0.759s-1.346 0.316-2.269 0.415c-0.923 0.099-1.747 0.159-2.472 0.18s-1.646 0.031-2.762 0.031-2.037-0.010-2.762-0.031c-0.725-0.021-1.549-0.081-2.472-0.18s-1.68-0.237-2.269-0.415c-0.589-0.177-1.194-0.43-1.815-0.759s-1.106-0.728-1.455-1.197c-0.349-0.469-0.636-1.051-0.861-1.745s-0.336-1.489-0.336-2.386zM20 21c0-1.657 0.895-3 2-3s2 1.343 2 3c0 1.657-0.895 3-2 3s-2-1.343-2-3zM8 21c0-1.657 0.895-3 2-3s2 1.343 2 3c0 1.657-0.895 3-2 3s-2-1.343-2-3z" fill="#fff"></path>
38
            </svg>
39
          </a>
40
        </li>
41
    </section>
42
  </article>

Кнопка - картинка и некоторый текст. При нажатии происходит демонстрация карточки профиля. Карточка профиля состоит из 4-х секций: кнопка закрытия, секция детальной информации, аватар и строка, содержащая иконки социальных сетей. В данном примере мы используем SVG иконки из коллекции Entypo.

Стили

Перед тем как заняться анимацией давайте создадим некоторые стили для нашей кнопки и карточки профайла. Сперва, кнопка:

1
.show-card {
2
  background: #fff;
3
  border-radius: 4em;
4
  border: 0.25em solid #1fa756;
5
  color: #1fa756;
6
  font-size: 18px;
7
  left: 50%;
8
  line-height: 1.5;
9
  padding: 1em 1em 1em 4em;
10
  position: absolute;
11
  top: 50%;
12
  transform: translate(-50%, -50%);
13
  outline: none;
14
}
15
16
.show-card img {
17
  border-radius: 50%;
18
  left: 0.3em;
19
  position: absolute;
20
  top: 0.25em;
21
  width: 3em;
22
}

Примечание: мы добавили outline: none; для элемента с классом .show-card , потому как некоторые браузеры добавляют специфическое свечение для кнопок при получении ими фокуса (мы хотим избежать данного эффекта):

Далее мы стилизируем карточку профиля и каждую из секций в ней.

1
.card {
2
  bottom: calc(50% - 8em);
3
  display: none;
4
  height: 16em;
5
  left: calc(50% - 10em);
6
  position: absolute;
7
  transition: all 0.4s 0.4s cubic-bezier(.5,.2,.43,1.33);
8
  width: 20em;
9
}
10
11
.close {
12
  color: #aaa;
13
  cursor: pointer;
14
  height: 1em;
15
  opacity: 0;
16
  position: absolute;
17
  right: 0.5em;
18
  top: 0.5em;
19
  width: 1em;
20
  z-index: 10;
21
}
22
23
.details {
24
  position: absolute;
25
  bottom: 2.5em;
26
  background: #fff;
27
  border-radius: 0.25em;
28
  height: 0;
29
  overflow: hidden;
30
  text-align: center;
31
  width: 20em;
32
}
33
34
.name {
35
  color: #333;
36
  font-weight: bold;
37
  margin: 3em 0 0;
38
  opacity: 0;
39
}
40
41
.description {
42
  color: #666;
43
  font-size: 1em;
44
  font-weight: 200;
45
  line-height: 1.5;
46
  margin: 0.75em 2em 2em;
47
  opacity: 0;
48
}
49
50
.headshot img {
51
  border-radius: 50%;
52
  border: 0.5em solid #fff;
53
  display: block;
54
  height: 6em;
55
  margin: -3em auto 0.5em;
56
  opacity: 0;
57
  width: 6em;
58
}
59
60
.icon-bar {
61
  background: #1fa756;
62
  border-radius: 0.25em;
63
  left: -1em;
64
  position: absolute;
65
  right: -1em;
66
  top: 13em;
67
}
68
69
.icon-bar ul {
70
  display: flex;
71
  flex-display: column;
72
  flex-wrap: nowrap;
73
  padding: 0;
74
}
75
76
.icon-bar li {
77
  display: inline-block;
78
  font-size: 2em;
79
  opacity: 0;
80
  padding: 0 1em;
81
  width: 33%;
82
}
83
84
.icon-bar a {
85
  color: #fff;
86
  text-decoration: none;
87
}

Обратите внимание что мы установили display: none по умолчанию. Позже мы будем контролировать данное значение используя JavaScript.

Базовые появление и исчезновение

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

1
// Show the card on clicking the button

2
$('.show-card').click(function(e) {
3
  $('.card').addClass('show').css('display', 'block');
4
  $('.show-card').addClass('hide');
5
});
6
7
// Hide the card on clicking the "x"

8
$('.card .close').click(function(e) {
9
  $('.card').css('display', 'none');
10
});

Теперь мы можем показывать и скрывать карточку профиля, используя jQuery и CSS свойство display

Пример базового функционала показа/сокрытия представлен ниже:

Перед анимацией

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

1
.close, .name, .description, .headshot img, .icon-bar li {
2
  opacity: 0;
3
}
4
.details {
5
  height: 0;
6
}

Данные элементы буду иметь задержку перед началом анимации, поэтому они должны быть скрыты по умолчанию.

Базовые анимации

Используя механизм демонстрация и сокрытия карточки профиля мы можем начать добавление анимаций. JavaScript ниже при появлении добавляет состояние show для карточки профиля, что дает на возможность привязать анимации к данному классу, который будет представлять индивидуальные части карты.

Для этого мы используем CSS свойство animation и пропишем ключевые кадры ( keyframes )

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

Для демонстрации работы ключевых кадров ( keyframes ) давайте создадим анимацию появления и затухания.

1
@keyframes fade-in {
2
  0% {
3
    opacity: 0;
4
  }
5
  100% {
6
    opacity: 1;
7
  }
8
}
9
10
@keyframes fade-out {
11
  0% {
12
    opacity: 1;
13
  }
14
  100% {
15
    opacity: 0;
16
  }
17
}

Ключевые кадры - это набор шагов, определенных в процентах. Может быть сколько угодно шагов, но в нашем примере мы определили только стартовый (0%) и конечный (100%) ключевые кадры. В анимации появлении (fade-in) мы начинаем с полной прозрачности (opacity 0) и заканчиваем c уже полностью видимым элементом (opacity 1) Анимация затухания fade-out является полной противоположностью предыдущей.

Мы можем использовать свойство animation для применения анимации затухания для кнопки при ее появлении и сокрытии.

1
.show-card {
2
  animation: fade-in 0.4s 1s forwards ease-out;
3
}
4
.show-card.hide {
5
  animation: fade-out 0.4s forwards ease-out;
6
}

Стили анимаций указывают карточке профиля использовать анимацию fade-in, длительностью в 0.4 секунды с задержкой в 1 секунду. Анимации будет проиграна 1 раз и остановится в конце (начале), кроме того она будет использовать функцию тайминга ease-out.

При применении класса hide к кнопке, начнется анимация fade-out.

Эффект отскока функции тайминга

Сперва продемонстрируем секцию с иконками. Так как это место где будут расположены ссылки, нам хотелось бы выделить данное место и акцентировать на нем внимание.

В анимации мы можем использовать интересный эффект используя свойство функции тайминга. В данном случае мы можем использовать функцию тайминга cubic-bezier для добавления своего рода "отскока" при появлении секции иконок.

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

1
@keyframes show-icon-bar {
2
  0% {
3
    height: 0;
4
  }
5
  100% {
6
    height: 4.5em;
7
  }
8
}

Теперь мы можем применить данный набор кадров для секции иконок при добавлении класса show к карточке профиля.

1
.card.show .icon-bar {
2
  animation: show-icon-bar .5s forwards cubic-bezier(.64,1.87,.64,.64);
3
}

Эффект отскока достигается за счет использования функции тайминга cubic-bezier. Функции тайминга описывают изменения скорости в течении анимации и могут ускорять или замедлять скорость анимации в её начале или конце. Данная анимации идет с небольшим вылетом, а после выравнивается, создавая эффект отскока.

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

После демонстрации строки иконок, нам необходимо продемонстрировать секции содержащие контент и аватар. Нам бы хотелось что бы данная секция появилась после появления секции с иконками. Для достижения этой цели мы используем свойство animation-delay.

1
.card.show .details {
2
  animation: show-detail-container 0.7s 0.5s forwards cubic-bezier(.54,-0.38,.34,1.42);
3
}

Анимация которая будет применяться к секции details имеет продолжительность 0.7 секунды и задержку в 0.5 секунды. Это означает что анимации не начнется до тех пор пока не появится секция иконок.

Мы так же используем тайминг функцию cubic bezier для придания секции некоторого отскока.

Далее мы определим набор ключевых кадров для анимации этого контейнера.

1
@keyframes show-detail-container {
2
  0% {
3
    height: 0;
4
  }
5
  100% {
6
    height: 13.5em;
7
  }
8
}

Ключевые кадры анимации show-detail-container начинаются с нулевой высоты и заканчиваются полной видимостью контейнера. Функция тайминга cubic bezier опять же добавляет эффект "отскока".

Комбинирование нескольких анимаций

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

В нашем случае мы будем скрывать (используя эффект затухания) аватар, имя и описание. В то же время используем функцию pop-in для эффекта появления с дальнего расстояния.

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

Для начала мы определи ключевые кадры pop-in.

1
@keyframes pop-in {
2
  0% {
3
    transform: scale(0.7);
4
  }
5
  100% {
6
    transform: scale(1);
7
  }
8
}

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

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

1
.card.show .headshot img {
2
  animation: fade-in 0.4s 1.2s forwards, pop-in 0.6s 1.2s forwards cubic-bezier(.64,1.87,.64,.64);
3
}
4
.card.show .name {
5
  animation: fade-in 0.3s 1.3s forwards, pop-in 0.3s 1.3s forwards cubic-bezier(.64,1.87,.64,.64);
6
}
7
.card.show .description {
8
  animation: fade-in 0.3s 1.4s forwards, pop-in 0.3s 1.4s forwards cubic-bezier(.64,1.87,.64,.64);
9
}

Иконка закрытия

Анимация иконки закрытия будет использовать набор кадров fade-in который мы определили ранее,

1
.card.show .close {
2
  animation: fade-in 0.3s 1.3s forwards;
3
}

Призыв к действию

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

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

1
@keyframes show-icon {
2
  0% {
3
    opacity: 0;
4
    transform: rotateZ(-40deg);
5
  }
6
  100% {
7
    opacity: 1;
8
    transform: rotateZ(0);
9
  }
10
}

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

1
.card.show .icon-bar li {
2
  animation: show-icon 0.5s forwards cubic-bezier(.64,1.87,.64,.64);
3
}
4
5
.card.show .icon-bar li:nth-child(1) {
6
  animation-delay: 1.8s;
7
}
8
.card.show .icon-bar li:nth-child(2) {
9
  animation-delay: 1.9s;
10
}
11
.card.show .icon-bar li:nth-child(3) {
12
  animation-delay: 2s;
13
}

Соберите все это вместе и мы получим карточку профиля которая симпатично появляется при нажатии на кнопку.

Еще одна вещь

Перед тем как мы закончим, нам необходимо добавить действия hide для кнопки закрытия и анимацию исчезновения карточки профиля. Прежде всего мы обновим JavaScript. При нажатии на иконку close JavaScript ждет 1 секунду перед тем как скрыть карточку при помощи display: none.

1
$('.show-card').click(function(e) {
2
  $('.card').addClass('show').css('display', 'block');
3
  $('.show-card').addClass('hide');
4
});
5
6
$('.card .close').click(function(e) {
7
  $('.card').addClass('hide');
8
  setTimeout(function() {
9
    $('.card').css('display', 'none').removeClass('show').removeClass('hide');
10
  }, 1000);
11
  $('.show-card').removeClass('hide');
12
});

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

1
@keyframes drop-card {
2
  100% {
3
    bottom: -100%;
4
    transform: rotateZ(20deg);
5
    opacity: 0;
6
  }
7
}

Теперь применим эту анимации к карте профиля.

1
.card.hide {
2
  animation: drop-card 1s forwards cubic-bezier(.54,-0.38,.34,1.42);
3
}

Демонстрация

Собрав все вместе, мы получим следующий результат.

Обратите внимание на префиксы и совместимость браузеров

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

Резюме

Используя технику комбинации анимаций и в частности свойство animation-delay мы построили небольшой виджет и сделали его более привлекательным. Анимации проводят пользователя через все элементы и направляют его внимание непосредственно к призыву к действию.

Анимация - отличный путь для взаимодействия с вашим дизайном. Это взаимодействие помогает посетителям понять ваши намерения, а также улучшить взаимопонимание пользователя и системы.

Advertisement
Did you find this post useful?
Want a weekly email summary?
Subscribe below and we’ll send you a weekly email summary of all new Web Design tutorials. Never miss out on learning about the next big thing.
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.