CSS Animations

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

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

CSS анимация состоит из двух основных строительных блоков:

1. Ключевые кадры - определяют этапы и стили анимации.
2. Свойство animation - назначьте @keyframes конкретному элементу CSS и определите, как он анимируется.

Ключевые кадры

Ключевые кадры (@keyframes) являются основой CSS анимации. Они определяют, как выглядит анимация на каждом этапе временной шкалы анимации.  Каждый @keyframes состоит из:

1. Имя анимации. Имя, которое описывает анимацию, например bounceIn.
2. Этапы анимации. Каждый этап анимации представлен в процентах. 0% представляет начальное состояние анимации, 100% - конечное состояние анимации. Между ними можно добавить несколько промежуточных состояний.
3. Свойства CSS. Свойства, определенные для каждого этапа временной шкалы анимации.

Давайте разберем следующий пример:

@keyframes имеет три этапа. На первом этапе (0%) элемент имеет непрозрачность 0 (ноль, то бишь его не видно) и уменьшен до 10 процентов от размера по умолчанию, используя масштаб преобразования CSS (подробно про свойство transform здесь). На втором этапе (60%) элемент становится полностью непрозрачным и увеличивается до 120 процентов от размера по умолчанию. На последнем этапе (100%) он немного уменьшается и возвращается к размеру по умолчанию.

С помощью @keyframes описывается анимация, но чтобы её запустить, нам нужно присвоить имя @keyframes свойству любого блока, которое называется animation-name:

#animation {

animation-name: bounceIn

}

Однако, в нашем примере указано другое свойство - animation. Это сокращение (как обычно, в CSS любят сокращения) многих свойств, определяющих имя анимации и то, как именно анимация будет осуществляться. В нашем случае указаны имя анимации (animation-name) и продолжительность (animation-duration). Еще раз, наш код:

#animation {

animation: bounceIn 2s;

}

Эквивалентен коду

#animation {

animation-duration: 2s;

animation-name: bounceIn;

}

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

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

Свойства анимации

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

animation: [animation-name] [animation-duration] [animation-timing-function]

[animation-delay] [animation-iteration-count] [animation-direction]

[animation-fill-mode] [animation-play-state];

Как я уже написал выше, обязательными из них являются только первые два: имя @keyframes и длительность (указывается в секундах и миллисекундах). Все остальные свойства необязательные, но весьма полезные:

1) animation-timing-function. Определяет кривую скорости или темп анимации. Вы можете задать синхронизацию со следующими предопределенными параметрами: ease, linear, ease-in, ease-out, ease-in-out, initial, inherit. Этот параметр аналогичен параметру в transition, то есть для более подробного понимания этой функции придется вникать в математику. Поэтому рекомендую аналогично присвоить нашей анимации одно из значений ease, linear, ease-in, ease-out, ease-in-out и посмотреть в браузере, как ведет себя анимация при этих значениях.

Пример CSS кода для этого свойства (кстати, ease является значением по умолчанию):

animation-timing-function: ease-in-out;

Или в сокращенном варианте:

animation: [animation-name] [animation-duration] [animation-timing-function];

animation: bounceIn 2s ease-in-out;

2) animation-delay. Позволяет определить , когда анимация (или кусочки анимации) начнется. Значение определяется в секундах (s) или миллисекундах (ms). Положительное значение (например, 2s) запустит анимацию через 2 секунды после ее запуска. Элемент останется без анимации до этого времени. Отрицательное значение (например, -2s) запустит анимацию сразу, но от длительности анимации отщипнет указанную задержку. Например, в данном коде:

animation: bounceIn 4s ease-in-out -2s;

Анимация запустится сразу и на середине, так как от длительности 4 секунды мы отняли двухсекундную задержку.

В общем виде данное свойство может быть указано как

animation-delay: 5s;

Или в сокращенном варианте

animation: [animation-name] [animation-duration] [animation-timing-function]

[animation-delay];

animation: bounceIn 2s ease-in-out 3s;

3) animation-iteration-count. Определяет, сколько раз анимация будет повторяться. Возможные значения:

1. Число - определенное количество итераций (по умолчанию 1).
2. infinite - анимация повторяется бесконечно.
3. initial - устанавливает счетчик итераций в значение по умолчанию.
4. inherit - наследует значение от родителя.

Синтаксис CSS:

animation-iteration-count: 2;

Или в сокращенном варианте:

animation: [animation-name] [animation-duration] [animation-timing-function]

[animation-delay] [animation-iteration-count];

animation: bounceIn 2s ease-in-out 3s 2;

4) animation-direction. Данное свойство определяет, в каком направлении анимация будет двигаться: вперед, назад или в альтернативных циклах:

1. normal (по умолчанию) - анимация воспроизводится вперед. На каждом цикле анимация сбрасывается в начальное состояние (0%) и снова воспроизводится вперед (до 100%).
2. reverse - анимация воспроизводится задом наперед. На каждом цикле анимация сбрасывается до конечного состояния (100%) и воспроизводится в обратном направлении (до 0%).
3. alternate - анимация меняет направление каждый цикл. На каждом нечетном цикле анимация воспроизводится вперед (от 0% до 100%). На каждом четном цикле анимация воспроизводится в обратном направлении (от 100% до 0%).
4. alternate-reverse - анимация меняет направление каждый цикл. В каждом нечетном цикле анимация воспроизводится в обратном порядке (от 100% до 0%). На каждом четном цикле анимация воспроизводится вперед (0% или 100%).

Синтаксис CSS:

animation-direction: alternate;

Или в сокращенном варианте:

animation: [animation-name] [animation-duration] [animation-timing-function]

[animation-delay] [animation-iteration-count] [animation-direction];

animation: bounceIn 2s ease-in-out 3s 3 alternate;

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

1. backwards - перед анимацией (во время задержки анимации) к элементу применяются стили исходного ключевого кадра (0%).
2. forwards - после завершения анимации, стили, определенные в конечном ключевом кадре (100%), сохраняются.
3. both - анимация будет следовать правилам как вперед, так и назад, расширяя свойства анимации до и после анимации.
4. normal (по умолчанию) - анимация не применяет никаких стилей к элементу, до или после анимации.

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

Синтаксис CSS:

animation-fill-mode: forwards;

Или в сокращенном варианте:

animation: [animation-name] [animation-duration] [animation-timing-function]

[animation-delay] [animation-iteration-count] [animation-direction]

[animation-fill-mode];

animation: bounceIn 2s ease-in-out 3s 3 normal forwards;

6) animation-play-state. Определяет состояние анимации: воспроизведена или остановлена. Возобновление приостановленной анимации запускает анимацию с того места, где она была остановлена. Возможные значения:

1. playing - анимация в данный момент запущена.
2. paused - анимация в данный момент приостановлена.

Например, при наведении курсора на элемент с запущенной анимацией мы можем её остановить:

.div:hover {

animation-play-state: paused;

}

Если курсор увести с элемента, анимация продолжится с того места, где она остановилась при наведении курсора.

Как и в случае с transition, мы можем задать сразу несколько анимаций:

.div {

animation: slideIn 2s, rotate 1.75s;

}

Собственно, это и есть вся CSS анимация. Чтобы лучше запомнить все перечисленные свойства, просто добавляйте их к элементам и проверяйте работу в браузере. Можно делать любые трансформации (transform), менять цвета фона, текста, прозрачность. Объединяйте несколько анимаций. Пробуйте и запоминайте - CSS Animations весьма увлекательное мероприятие.

Итого

Мы разобрали такие интересные инструменты, как CSS Transitions и CSS Animations. Они помогают нам "оживить" интерфейс, сделать его более привлекательным и интересным для пользователя. Однако, не увлекайтесь этим сильно - слишком много анимаций будут раздражать пользователей. Не забывайте, что главная цель посетителя вашего сайта - удовлетворить возникшую потребность в чем-либо. Если анимация будет мешать ему сделать это быстро, он уйдет с сайта. Поэтому, будьте осторожны, ищите баланс между удобством и "вауэффектностью".

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