animation

Общие сведения

Свойства настраиваемые с помощью animation:

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

Оно может принимать одно или несколько значений, разделенных запятыми, где каждое значение вызывает и управляет @keyframes анимацией c помощью выше представленных свойств. Правило @keyframes определяет фактическую последовательность анимации и управляется с помощью свойств анимации.

/* Синтаксис определения одной анимации*/

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

/* Определение двух анимаций */

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

Дочерние свойства разделяются пробелами и их порядок не имеет значения, за исключением использования свойств animation-duration и animation-delay, они должны быть в таком порядке. Поэтому, если вы укажете два <time> значения в вашем определении, то первое из них будет сопоставлено с продолжительностью анимации, а второе с задержкой.

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

Синтаксис свойства

• Синтаксис:

  animation: <single-animation># 
  
  /* где */
  
  <single-animation> = <time> || <single-timing-function> || <time> || <single-animation-iteration-count> || <single-animation-direction> || <single-animation-fill-mode> || <single-animation-play-state> || <single-animation-name>

• Значение по умолчанию: none 0s ease 0s 1 normal none;
• Применяется: ко всем элементам и псевдоэлементам ::before и ::after
• Наследуется: нет
• Анимируется: нет

Значения свойства

• <single-animation># - одно или несколько определений анимации, разделённых запятыми, каждое из которых состоит из дочерних свойств. Для получения доп. информации по дочерним свойствам смотрите соответствующие записи.

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

Примечание

Анимация может применяться только к определённому набору CSS свойств. Чтобы получить более подробную информацию вы можете обратиться к CSS animatable properties.

Пример