CSS свойство animation-name

❮ Назад Вперед ❯

CSS свойство animation-name устанавливает название правила@keyframes, которую хотите применить. Свойство имеет две значения: none и keyframename. None является значением по умолчанию, которое указывает на отсутствие анимации. Keyframename указывает на название анимации.

Значение по умолчанию	none
Применяется	Ко всем элементам, а также к псевдоэлементам ::before и ::after.
Наследуется	Нет
Анимируемое	Нет
Версия	CSS3
DOM синтаксис	object.style.animationName = "element";

Синтаксис

animation-name: keyframename | none | initial | inherit;

Пример

<!DOCTYPE html>
<html>
  <head>
    <style>
      div {
      padding: 50px;
      animation: element 4s infinite;
      }
      @keyframes  element {
      0% { background-color: #8ebf42; }
      50% { background-color: #1c87c9; }
      100% { background-color: #d5dce8; }
      }
    </style>
  </head>
  <body>
    <h2> Пример animation-name</h2>
    <div>Для анимации установлено название "element".</div>
  </body>
</html>

Попробуйте сами!

В данном примере для анимации установлено название "element". Можно выбрать любое название.

Значения

Value	Description
none	Значение по умолчанию. Указывает на отсутствие анимации.
keyframename	Указывает на название анимации.
initial	Устанавливает свойство в значение по умолчанию.
inherit	Значение элемента наследуется от родительского элемента.