Все современные браузеры, кроме IE9- поддерживают CSS transitions и CSS animations, которые позволяют реализовать анимацию средствами CSS, без привлечения JavaScript. Анимация применяется к любым html-элементам, а также к псевдоэлементам :before и :after

Поддержка браузерами

Чтобы воспользоваться анимацией в своём проекте, вам достаточно сделать две вещи:

1. Создать саму анимацию c помощью ключевого слова @keyframes
2. Подключить её к элементу, который надо анимировать, и указать нужные свойства.

Правило @keyframes

Правило @keyframes позволяет создавать анимацию с помощью ключевых кадров — состояний объекта в определенный момент времени.

Ключевые кадры анимации создаются с помощью ключевых слов from и to (эквивалентны значениям 0% и 100%) или с помощью процентных пунктов, которых можно задавать сколько угодно. Также можно комбинировать ключевые слова и процентные пункты.

Если не задан начальный (from, 0%) или конечный (to, 100%) кадр, браузер установит для них расчётные значения анимируемых свойств такими, какими они были бы если бы не была применена анимация.

Если у двух ключевых кадров будут одинаковые селекторы, то последующий отменит действие предыдущего.

При определении анимации сразу после свойства @keyframes должно следовать имя данной анимации (данное имя затем должно быть указано в свойстве animation элемента, который будет анимирован).

Пример:

@keyframes move {
  from {
    transform: translateX(0px);
  }
  50% {
    transform: translateX(130px);
  }
  100% {
    transform: translateX(0px);
  }
}

Мы создали анимацию, которая работает следующим образом:

1. Начало анимации (from можно было написать 0%) – положение элемента по оси Х равно 0px;
2. Середина анимации (50%) – положение элемента по оси Х равно 130px;
3. Конец анимации (to мы использовали 100%) – возвращаем элемент на начало анимации, т.е. положение элемента по оси Х равно 0px;

[codepen_embed height=”268″ theme_id=”0″ slug_hash=”ONgOQY” default_tab=”result” user=”AmateR”]See the Pen <a href=’http://codepen.io/AmateR/pen/ONgOQY/’>ONgOQY</a> by Aleksei (<a href=’http://codepen.io/AmateR’>@AmateR</a>) on <a href=’http://codepen.io’>CodePen</a>.[/codepen_embed]

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

Ключевые кадры можно группировать:

@keyframes move {
  from {
    transform: translateX(0px);
  }
  25%, 50% {
    transform: translateX(130px);
  }
  100% {
    transform: translateX(0px);
  }
}

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

element {
    animation-name: animation-1, animation-2;
    animation-duration: 2s, 4s;
}

Подключение анимации к элементу происходит двумя командами – animation-name и animation-duration.

Название анимации

Свойство animation-name задает имя анимации. Рекомендуется использовать название, отражающее суть анимации, при этом можно использовать одно слово или несколько, связанных между собой при помощи пробела – или нижнего подчеркивания _.

animation-name: move;

Длительность анимации

Свойство устанавливает длительность анимации, например: animation-duration: 1s;. Его можно указывать в секундах (3s, 65s, .4s) или в миллисекундах (300ms, 1000ms). Не наследуется.

animation-duration: 5s;

Временная функция

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

Однако такие функции можно создавать самому. Специальная функция cubic-bezier (P1x, P1y, P2x, P2y); принимает четыре аргумента и строит на их основе кривую распределения значений в процессе анимации. Потренироваться в создании своих функций и посмотреть как они работают можно на этом сайте.

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

• ease – функция по умолчанию, анимация начинается медленно, разгоняется быстро и замедляется в конце. Соответствует cubic-bezier(0.25,0.1,0.25,1).
• linear – анимация происходит равномерно на протяжении всего времени, без колебаний в скорости; соответствует cubic-bezier(0,0,1,1).
• ease-in – анимация начинается медленно, а затем плавно ускоряется в конце; соответствует cubic-bezier(0.42,0,1,1).
• ease-out – анимация начинается быстро и плавно замедляется в конце; соответствует cubic-bezier(0,0,0.58,1).
• ease-in-out – анимация медленно начинается и медленно заканчивается; соответствует cubic-bezier(0.42,0,0.58,1).
• cubic-bezier(x1, y1, x2, y2) – см.выше.
• inherit – наследует это свойство от родительского элемента.

Визуальное сравнение

[codepen_embed height=”380″ theme_id=”0″ slug_hash=”VaWyjN” default_tab=”result” user=”AmateR”]See the Pen <a href=’http://codepen.io/AmateR/pen/VaWyjN/’>VaWyjN</a> by Aleksei (<a href=’http://codepen.io/AmateR’>@AmateR</a>) on <a href=’http://codepen.io’>CodePen</a>.[/codepen_embed]

Анимация с задержкой

Свойство animation-delay определяет задержку до начала воспроизведения анимации, задаётся в секундах или миллисекундах. Отрицательная задержка начинает анимацию с определенного момента внутри её цикла, т.е. со времени, указанного в задержке. Это позволяет применять анимацию к нескольким элементам со сдвигом фазы, изменяя лишь время задержки. Если вы хотите, чтобы анимация началась с середины, задайте отрицательную задержку, равную половине времени, установленном в animation-duration. Не наследуется.

element {
    animation-name: animation-1;
    animation-duration: 2s;
    animation-delay: 10s; // Перед стартом этой анимации пройдет 10 сек.
}

Повтор анимации

Свойство animation-iteration-count позволяет запустить анимацию несколько раз. Не наследуется. В качестве значения выставляем любое положительное значение 1, 2, 3 … и т.д. либо infinite для бесконечного повторения. Значение 0 или любое отрицательное число удаляют анимацию из проигрывания.

element {
    animation-name: animation-1;
    animation-duration: 2s;
    animation-delay: 10s;
    animation-iteration-count: 5; //эта анимация проиграется 5 раз
}

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

Свойство animation-direction задает направление повтора анимации. Если анимация повторяется только один раз, то это свойство не имеет смысла. Не наследуется.

• normal; — значение по умолчанию, анимация проигрывается в обычном направлении, с начала и до конца.
• reverse; — анимация проигрывается в обратном направлении, от to к from.
• alternate; — чётные проигрывания анимации будут идти в обратном направлении, а нечётные — в обычном.
• alternate-reverse; — чётные проигрывания анимации будут проигрываться в обычном направлении, а нечётные — в обратном.

[codepen_embed height=”317″ theme_id=”0″ slug_hash=”bpRaLq” default_tab=”result” user=”AmateR”]See the Pen <a href=’http://codepen.io/AmateR/pen/bpRaLq/’>bpRaLq</a> by Aleksei (<a href=’http://codepen.io/AmateR’>@AmateR</a>) on <a href=’http://codepen.io’>CodePen</a>.[/codepen_embed]

Проигрывание анимации

Свойство animation-play-state позволяет управлять проигрыванием и остановкой анимации. Остановка анимации внутри цикла возможна через использование этого свойства в скрипте (JavaScript). Также можно останавливать анимацию при наведении курсором мыши на объект (состояние :hover). Не наследуется.

• running – значение по умолчанию, означает проигрывание анимации.
• paused – останавливает анимацию.

Пример (при наведении на элемент анимация останавливается):

[codepen_embed height=”227″ theme_id=”0″ slug_hash=”ONgOQY” default_tab=”result” user=”AmateR”]See the Pen <a href=’http://codepen.io/AmateR/pen/ONgOQY/’>ONgOQY</a> by Aleksei (<a href=’http://codepen.io/AmateR’>@AmateR</a>) on <a href=’http://codepen.io’>CodePen</a>.[/codepen_embed]

Состояние элемента до и после воспроизведения анимации

Свойство animation-fill-mode определяет в каком состоянии будет элемент до начала анимации и после её завершения.

• forwards – воспроизводит анимацию до последнего кадра и не отматывает ее к первоначальному состоянию
• backwards – после завершения анимации состояние элемента будет соответствовать первому кадру.
• both – до начала анимации состояние элемента будет соответствовать первому кадру, а после окончания — последнему.

[codepen_embed height=”254″ theme_id=”0″ slug_hash=”NNgyPX” default_tab=”result” user=”AmateR”]See the Pen <a href=’http://codepen.io/AmateR/pen/NNgyPX/’>NNgyPX</a> by Aleksei (<a href=’http://codepen.io/AmateR’>@AmateR</a>) on <a href=’http://codepen.io’>CodePen</a>.[/codepen_embed]