CSS3 анимации для начинающих

December 18, 2014

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

Строительные блоки анимаций


Все CSS анимации состоят из двух основных моментов:

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


Давайте посмотрим на каждый в отдельности.

Ключевые кадры (keyframes)


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

  • Имя анимации: имя, описывающее анимацию, например, bounceIn .
  • Этапы анимации: каждый этап анимации представлен ​​в процентах. 0% представляет собой начальное состояние анимации. 100% представляет собой конечное состояние анимации. Между этими двумя состояниями можно добавить еще 98 этапов.
  • CSS свойства: CSS свойств, определяются для каждого этапа временной шкалы.


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

@keyframes bounceIn {
0% { transform: scale(0.1); opacity: 0; }
60% { transform: scale(1.2); opacity: 1; }
100% { transform: scale(1); }
}

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


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

Необходимо добавить следующие два свойства анимации для того, чтобы анимации запустились:

  • animation-name: название анимации, определены в @keyframes .
  • animation-duration: продолжительность анимации в секундах (например, 5s) или в миллисекундах (например, 200ms).


Давайте на примере нашего keyframes с именем bounceIn анимируем один из div'ов на странице

div {
animation-duration: 2s;
animation-name: bounceIn;
}

Можно также записать в сокращенной форме

div { animation: bounceIn 2s; }

Пример того, что получилось (для повтора анимации нажмите "Result")

[jsfiddle url="http://jsfiddle.net/d6wmo7ea/1/"]

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

 animation: [animation-name] [animation-duration] [animation-timing-function] [animation-delay] [animation-iteration-count] [animation-direction] [animation-fill-mode] [animation-play-state];

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

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


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

div {
-webkit-animation-duration: 2s;
animation-duration: 2s;
-webkit-animation-name: bounceIn;
animation-name: bounceIn;
}
@-webkit-keyframes bounceIn { /* styles */ }
@keyframes bounceIn { /* styles */ }

Чтобы сделать себе жизнь проще, советую рассмотреть возможность использования Bourbon, Sass, Less, Compass. Пример анимации с использованием бурбон

div { @include animation(bounceIn 2s); }
@include keyframes(bouncein) { /* styles */}

Дополнительные свойства анимации


Помимо основных свойств (имя, длительность) можно использовать дополнительные свойства для построения более сложных анимаций

  • animation-timing-function
  • animation-delay
  • animation-iteration-count
  • animation-direction
  • animation-fill-mode
  • animation-play-state


 

animation-timing-function


Определяет кривую скорости или темпа анимации. Вы можете указать следующие варианты:

  • ease
  • linear
  • ease-in
  • ease-out
  • ease-in-out
  • initial
  • inherit


[jsfiddle url="http://jsfiddle.net/adtab4bd/1/"]

Значением по умолчанию является ease. Эта анимация медленно начинается, ускоряется и к концу снова замедляется. Подробнее про варианты анимаций
CSS синтаксис:

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

Сокращенный синтаксис (рекомендуется):

animation: [animation-name] [animation-duration] [animation-timing-function]; animation: bounceIn 2s ease-in-out;

animation-delay


Позволяет указать, когда анимация (или часть анимации) начнется. Положительное значение (например, 2S) означает, что анимация стартует только через 2 секунды. Если значение будет отрицательным, то анимация начнется сразу же, не не с самого начала, а "перемотанная" на 2 секунды вперед.

Значение определяется в секундах (s) или миллисекундах (ms).

[jsfiddle url="http://jsfiddle.net/maxyc/1jkew1gh/"]

CSS синтаксис:

animation-delay: 5s;

Cокращенный синтаксис (рекомендуется):

animation: [animation-name] [animation-duration] [animation-timing-function] [animation-delay]; animation: bounceIn 2s ease-in-out 3s;

animation-iteration-count


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

Возможные значения:

  • # - определенное количество итераций (по умолчанию 1 )
  • infinite - анимация повторяется всегда
  • initial - задает число итераций указанное по умолчанию
  • 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;

[jsfiddle url="http://jsfiddle.net/maxyc/hc382dpo/"]

animation-direction


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

Возможные значения:

  • normal (по умолчанию) - анимация проигрывается вперед. На каждом цикле анимации сбрасывается на начальном состоянии (0%) и проигрывается снова вперед (до 100%).
  • reverse - анимация проигрывается в обратном направлении. На каждом цикле анимации сбрасывает в конечное состояние (100%) и проигрывается в обратном направлении (до 0%).
  • alternate - анимация меняет направление при каждой итерации цикла. На каждой нечетной итерации цикла, анимация проигрывается вперед (от 0% до 100%). На каждой четной итерации цикла анимация проигрывается в обратном направлении (100% до 0%).
  • 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;

[jsfiddle url="http://jsfiddle.net/maxyc/ehdpytzb/"]

animation-fill-mode


Данное свойство определяет, как будет вести себя элемент после окончания анимации. По умолчанию, до старта или после анимация никак не влияет на стили элемента.

  • backwards - до анимации стили начального ключевого кадра (0%) применяются к элементу.
  • forwards - после завершения анимации, стили, определенные в последнем ключевом кадре (100%) сохраняются в элементе.
  • both - анимация будет следовать правилам, как для backwards так и для forwards.
  • 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 forwards;

[jsfiddle url="http://jsfiddle.net/maxyc/q4ho4u68/"]

animation-play-state


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

Возможные значения:

  • playing - анимация в настоящее время работает
  • paused - анимация в настоящий момент приостановлена


Пример:

.div:hover { animation-play-state: paused; }

[jsfiddle url="http://jsfiddle.net/maxyc/hpoaz0rk/"]

Несколько анимаций


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

.div { animation: slideIn 2s, animation: rotate 1.75s; }

Комментарии

comments powered by Disqus