Чем ближе мы приближаемся к началу работы интерфейса, тем понятней он становится для пользователя. В жизни практически ничего не происходит мгновенно — открывая банку газировки или закрывая глаза перед сном мы наблюдаем кучу промежуточных состояний, а не резкое “открыто/закрыто”, как это происходит в веб.

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

Анимация — это набор ключевых кадров или кейфреймов хранящихся в CSS:

@keyframes animation-test {
0% {
width: 100px;
}
100% {
width: 200px;
}
}

Давайте разберём, что здесь происходит. Ключевое слово @keyframes обозначает саму анимацию. Затем идет имя анимации, в нашем случае — animation-test. В фигурных скобках содержится список кейфреймов. Мы используем начальный кадр 0% и конечный 100% (их также можно записать как from и to).
Взгляните на код ниже. Анимацию можно задать и таким образом:

@keyframes animation-test {
from {
width: 0;
}
25% {
width: 75px;
}
75% {
width: 150px;
 }
to {
width: 100%;
}
}

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

Подключить анимацию к элементу можно так:

element-selector {
animation-name: your-animation-name;
animation-duration: 2.5s;
}

Свойство animation-name задаёт имя для анимации @keyframes. Правило animation-duration задаёт длительность анимации в секундах (1s, 30s, .5s) или миллисекундах (600ms, 2500ms).

Так же можно группировать кейфреймы:

@keyframes animation-test {
0%, 35% {
width: 50px;
}
75% {
width: 200px;
}
100% {
width: 100%;
}
}

К одному элементу (селектору) можно применить по несколько анимаций. Их имена и параметры должны быть записаны в порядке применения:

element-selector {
animation-name: anim-name-1, anim-name-2;
animation-duration: 1s, 3s;
}

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

Свойство animation-delay задает задержку перед воспроизведением анимации в секундах или миллисекундах:

element-selector {
animation-name: anim-name-1;
animation-duration: 3s;
animation-delay: 2s; /* перед запуском анимации пройдет 2 секунды */
}

Повторное воспроизведение анимации:

Используя animation-iteration-count мы можем указывать число повторов анимации: 0, 1, 2, 3, и т.д. Или infinite для зацикливания:

element-selector {
animation-name: anim-name-1;
animation-duration: 3s;
animation-delay: 4s;
animation-iteration-count: 5; /* анимация воспроизводится 5  раз */
}

Состояние элемента до и после анимации:

При помощи свойства animation-fill-mode возможно указывать, в каком состоянии элемент будет находиться до начала анимации и после завершения:

animation-fill-mode: forwards; — элемент анимации будет находиться в состоянии последнего кейфрейма после завершения/воспроизведения;
animation-fill-mode: backwards; — элемент будет находиться в состоянии первого кейфрейма;
animation-fill-mode: both; — перед началом анимации элемент будет находиться в состоянии первого кейфрейма, после завершения - в состоянии последнего.

Запуск и остановка анимации:

За это отвечает свойство animation-play-state, которое может принимать два значения: running или paused.

element-selector:hover {
animation-play-state: paused;
}

Направление анимации:

Свойство animation-direction, указывает на то, как управлять направлением воспроизведения анимации. Вот возможные значения:

animation-direction: normal; — анимация воспроизводится в прямом порядке;
animation-direction: reverse; — анимация воспроизводится в обратном порядке, от to к from;
animation-direction: alternate; — чётные повторы анимации воспроизводятся в обратном порядке, нечётные - в прямом;
animation-direction: alternate-reverse; — нечётные повторы анимации воспроизводятся в обратном порядке, чётные - в прямом.

Функция плавности вывода анимированных кадров:

Свойство animation-timing-function позволяет задать специальную функцию, отвечающую за скорость воспроизведения анимации. По умолчанию, анимация начинается медленно, разгоняется быстро и замедляется в конце. Сейчас у нас существуют следующие предопределенные значения: linear, ease, ease-in, ease-out, ease-in-out, step-start, step-end.

Однако вы можете создавать такие функции самостоятельно. Значение animation-timing-function: cubic-bezier(P1x, P1y, P2x, P2y); принимает на вход 4 аргумента и строит кривую распределения процесса анимации.

Изучить подробнее или опробовать создание этих функций можно на сайте http://cubic-bezier.com

И, наконец, анимацию можно разбить на набор отдельных значений (шагов) при помощи функции steps которая принимает на вход количество шагов и направление (start или end). На примере ниже анимация состоит из 5 шагов, последний из которых произойдёт прямо перед завершением анимации:

element-selector {
animation-name: anim-name-1;
animation-duration: 3s;
animation-delay: 5s;
animation-iteration-count: 3;
animation-timing-function: steps(5, end);
}

Поддержка браузеров для анимации:

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

Значения с -webkit-, -moz- или -O- указывает первую версию, которая работала с префиксом.

На сайте https://www.w3schools.com можно подробней изучить CSS анимацаию (с примерами).
Одна из популярных библиотек для работы с анимациями — animate.css.

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

Во-первых, CSS это мощный инструмент улучшения взаимодействия интерфейса с пользователем. Он не сильно влияет на производительность юзеров. В отличии от JavaScript аналогов. Технология, за счет использования вычислительных мощностей GPU, дает возможность браузерам быстрее оптимизировать скорость отрисовки элементов.

Во-вторых, гибкость, скоростью и простота внедрения CSS анимаций поможет “вдохнуть жизнь” в существующие или новые интерфейсы. Разработав общие и оригинальные подходы, разобравшись в особенности технологии можно делать уникальные юзабилити интерфейсы почти для всех проектов.

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

следующая статья