Сделать сайт интереснее: учимся создавать анимацию в CSS3

Роман Андреев

24.09.2021 14:14

Цель анимации — обратить на себя внимание. Человек замечает любые движения на уровне инстинктов. Если анимация сделана на высоком уровне и гармонично вписывается в дизайн сайта, то она значительно увеличит уровень обратной связи. В нашей статье мы разберем, что такое CSS3-анимация и как ее использовать.

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

Составляющие CSS3-анимации

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

Ключевые кадры или @keyframes — основа любой анимации CSS. Они обозначают, как будет выглядеть картинка на каждом этапе времени. Каждый кадр состоит из следующих компонентов:

имя;
этапы, где 0% — первоначальное состояние, а 100% — заключительное;
CSS-свойства, определяющиеся для каждого из этапов.

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

@keyframes example {
0% { transform: scale(0.2); opacity: 0; } //элемент прозрачный, масштабируемость до 20 процентов
50% { transform: scale(1.5); opacity: 1; } //элемент проявляется и увеличивается до 150%
100% { transform: scale(1); } //возвращение элемента к стандартному размеру
}

Еще один способ указания начального и конечного кадров — from и to, между которыми указываются проценты.

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

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

element {
  animation-name: example; //имя для анимации
  animation-duration: 3s; //длительность в секундах (или миллисекундах)
}

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

div {
  animation-duration: 3s;
  animation-name: example;
}

В сокращенной форме такой код будет выглядеть так:

div { animation: example 3s; }

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

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

Давайте познакомимся с основным перечнем свойств CSS3-анимации:

задержка;
запуск и остановка;
повторное воспроизведение;
состояние до начала анимации и после ее окончания;
направление движения.

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

Задержка анимации: свойство animation-delay

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

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

Повторное воспроизведение анимации: свойство animation-iteration-count

Повторное воспроизведение анимации записывается как animation-iteration-count. Его можно указывать в виде количества повторов анимации, например, 0 или 3 раза.

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

Фрагмент кода с использованием задержки и повторного воспроизведения будет выглядеть следующим образом:

element {
  animation-name: example;
  animation-duration: 3s;
  animation-delay: 2s;
  animation-iteration-count: infinite; // анимация будет зацикленной
}

Состояние элемента до и после: свойство animation-fill-mode

Следующий параметр CSS3-анимации — состояние элемента до и после. Оно называется animation-fill-mode. Для него после двоеточия можно прописать следующие значения:

forwards — означает, что после завершения анимации элемент окажется в состоянии последнего кейфрейма;
none — стандартное значение, при котором состояние элемента не изменяется;
both — определяет, что перед началом анимации элемент будет в состоянии первого кейфрейма, а после завершения перейдет в последний;
backwards — когда анимация завершится, элемент вернется в состояние первого кейфрейма.

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

Синтаксис будет выглядеть следующим образом:

animation-fill-mode: none;
animation-fill-mode: forwards;
animation-fill-mode: backwards;
animation-fill-mode: both;
animation-fill-mode: none, backwards;
animation-fill-mode: both, forwards, none;

Запуск и остановка анимации: animation-play-state

Свойство запуска и остановки анимации прописывается как animation-play-state. Оно принимает лишь два основных варианта значений: running или paused. А также initial — устанавливает значение свойства в значение по умолчанию, и inherit — наследует значение от родительского элемента.

Синтаксис:

animation-play-state: running;
animation-play-state: paused;
animation-play-state: paused, running, running;
animation-play-state: initial;
animation-play-state: inherit;

Направление анимации: свойство animation-direction

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

normal — последовательный порядок;
alternate — четные повторы в нормальном порядке, а нечетные — в обратном;
reverse — обратный порядок;
alternate-reverse — нечетные повторы в прямом, а четные — в обратном порядке;
initial — устанавливает значение свойства в значение по умолчанию;
inherit — наследует значение от родительского элемента.

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

Синтаксис:

animation-direction: normal;
animation-direction: reverse;
animation-direction: alternate;
animation-direction: alternate-reverse;
animation-direction: normal, reverse;
animation-direction: alternate, reverse, normal;
animation-direction: initial;
animation-direction: inherit;

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

Существует специальная функция плавности вывода анимируемых кадров. Она называется animation-timing-function и определяет скорость воспроизведения анимации. По умолчанию значения функции работают так, что анимация запускается медленно, затем увеличивает скорость и к концу вновь замедляется.

На разных этапах воспроизведения анимация имеет разную скорость

Есть несколько значений, которые вы можете использовать в коде:

linear — кадры будут сменяться равномерно на протяжении всего времени без каких-либо колебаний;
ease — значение, используемое по умолчанию, то есть сначала воспроизводится медленно, затем ускоряется и замедляется к завершению;
ease-in / ease-in-out — в первом варианте анимация запускается медленно и плавно, ускоряется к своему завершению, во втором — начинается быстро, а под конец замедляется;
step-start / step-end — значения анимации в шагах, для которых изменения запускаются в начале или в конце каждого шага.

Это стандартные значения, при необходимости вы можете создавать подобные самостоятельно. Функция принимает четыре аргумента для построения кривой распределения cubic-bezier(x1, y1, x2, y2). В сети есть сервисы, которые позволяют попрактиковаться в создании собственных вариантов.

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

animation-timing-function: steps(5, end);

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

start;
jump-none;
end;
jump-both.

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

Кроссбраузерность

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

div {
    -webkit-animation-duration: 2s; 
    animation-duration: 2s; 
    -webkit-animation-name: example; 
    animation-name: example; 
}
@-webkit-keyframes example { /* свойства */ } 
@keyframes example { /* свойства */ }

Для упрощения работы можно попробовать воспользоваться такими технологиями, как Sass, Bourbon, Less.

Заключение

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