animation-name

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

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

В свойстве animation-name можно указать либо одно название анимации, либо список имён, разделённых запятыми. Каждое название соответствует идентификатору @keyframes. Если название анимации указанное в animation-name не существует, то анимация не будет применена.

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

• Синтаксис:

  animation-name: <single-animation-name># 
  /* где */
  <single-animation-name> = none | <user-ident> 

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

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

• none - ключевые кадры не указаны, поэтому анимации не будет. Любые другие анимационные свойства указанные для этой анимации не будут иметь никакого эффекта.
• <user-ident> - анимация будет использовать ключевые кадры указанные с помощью <user-ident>, если они существуют. Если таких ключевых кадров нет, то и анимации не будет.

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

Примечание

Когда вы предоставляете список значений, этот список обычно сопоставляется со списком значений предоставляемым другими свойствами связанными с анимацией, такими как animation-delay, animation-timing-function и animation-name, и другими. Каждый список значений в этих свойствах обрабатывается как массив, в котором у каждого значения есть собственный индекс. После этого значение по индексу сопоставляется со значением из другого списка.

Свойство animation-name обычно указывается как часть сокращённого свойства animation.

Пример