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 Значение элемента наследуется от родительского элемента.

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

chrome firefox safari opera
43.0+
4.0-42.0 -webkit-
16.0+
5.0-15.0 -moz-
9.0+
5.1-8.0 -webkit-
12.0+
15.0-29.0 -webkit-

Практикуйте свои знания

What is the purpose of the CSS property 'animation-name'?
Считаете ли это полезным?