Ознакомление с CSS-анимацией (animation)

В прошлой статье мы делали краткий обзор CSS-переходов, а в этом посте проведем ознакомительный рейд по полезным, как я надеюсь, вопросам CSS-анимации. Эти два новых свойства в CSS3 позволяют создавать на сайте привлекательную и «магическую» интерактивность, даже без использования JavaScript. Также, в сегодняшнем посте, рассмотрим практический пример применения свойства animation в CSS.

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

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

Что такое CSS-анимация (animation)?

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

• keyframes – это ключевые кадры, которые используются для определения стилей для элемента в разные промежутки времени.
• Свойства анимации – это те свойства, которые назначаются элементу с помощью ключевых кадров (@keyframes) и определяют то, как элемент будет анимироваться.

Анимация в CSS может применяться практически ко всем элементам в HTML5 (включая псевдоэлементы :before и :after).

animation присваивается определенному блоку в его «спокойном» (обычном) состоянии с помощью свойств анимации, которые можно использовать для анимации многих свойств CSS (например, цвет фона, высота или ширина). Поведение анимации определяется с помощью правил в ключевых кадрах (@keyframes).

Есть восемь свойств animation (в алфавитном порядке):

• animation-delay – задает задержку перед началом анимации, в секундах
• animation-direction – указывает на то, должна ли анимация воспроизводиться в обратном или чередующемся циклах (reverse или alternate)
• animation-duration – определяет то, сколько секунд или миллисекунд требуется анимации для завершения одного цикла
• animation-fill-mode – стиль для элемента, когда анимация не воспроизводится. Например, когда анимация завершилась или у нее задана задержка
• animation-iteration-count – задает количество раз, которое должна воспроизводиться анимация (infinite – для бесконечного количества раз)
• animation-name – определяет имя @keyframes анимации
• animation-play-state – указывает на то, запущена ли анимация или приостановлена (running или paused)
• animation-timing-function – определяет кривую скорости анимации

Весь синтаксис свойств анимации выглядит так:

div {
  animation-name: здесь название для ключевых кадров;
  animation-duration: продолжительность анимации в секундах или миллисекундах;
  animation-timing-function: ease-out;
  animation-delay: 0s;
  animation-direction: alternate;
  animation-iteration-count: infinite;
  animation-fill-mode: none;
  animation-play-state: running;
}

А короткая запись свойств анимации выглядит так:

div {
  animation: nazvaniye-animaciyi 1.5s ease-out 0s alternate infinite none running;
}

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

Образец синтаксиса ключевых кадров @keyframes выглядит так:

@keyframes [название анимации] {
  0% { /* начальный кадр */
    [свойство CSS]:[значение свойства];
  }
  100% { /* финальный кадр */
    [свойство CSS]:[значение свойства];
  }
}

В правилах @keyframes можно использовать больше двух (начального и финального) ключевых кадров (например, промежуточные в отметке 30%, 75% и т.д.). Также в каждом ключевом кадре можно указывать достаточно большое количество свойств CSS.

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

div {
  background-color: red;
  border-radius: 50%;
  height: 250px;
  width: 250px;
  margin: 50px;
  animation: pulsirovaniye 2s ease infinite;
}
@keyframes pulsirovaniye {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.3);
  }
  100% {
    transform: scale(1);
  }
}

Демо-пример кода:

Смотрите больше примеров анимации в CSS с помощью ключевых кадров keyframes в нашем практическом уроке.

Практически все современные браузеры поддерживают это свойство, но для большей совместимости нужно использовать префиксы браузеров, причем стандартный синтаксис объявляется последним. Это относится и к свойству animation, и к правилам ключевых кадров keyframes:

div {
  -webkit-animation: [название кейфрейма] 3s infinite;
  -moz-animation:    [название кейфрейма] 3s infinite;
  -o-animation:      [название кейфрейма] 3s infinite;
  animation:         [название кейфрейма] 3s infinite;
}
@-webkit-keyframes [название кейфрейма] {
  0%   { opacity: 0; }
  100% { opacity: 1; }
}
@-moz-keyframes [название кейфрейма] {
  0%   { opacity: 0; }
  100% { opacity: 1; }
}
@-o-keyframes [название кейфрейма] {
  0%   { opacity: 0; }
  100% { opacity: 1; }
}
@keyframes [название кейфрейма] {
  0%   { opacity: 0; }
  100% { opacity: 1; }
}

Спасибо за внимание!