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

Свойство animation-name CSS задаёт имена одного или нескольких правил at-rule @keyframes, описывающих анимацию, применяемую к элементу. Несколько правил at-rule @keyframes указываются в виде разделённого запятыми списка имён. Если указанное имя не соответствует ни одному правилу at-rule @keyframes, анимация свойств не выполняется.

Часто удобно использовать сокращённое свойство animation, чтобы задать все свойства анимации сразу.

Попробуйте

animation-name: none;

animation-name: slide;

animation-name: bounce;

<section class="flex-column" id="default-example">
  <div class="animating" id="example-element"></div>
</section>

#example-element {
  animation-direction: alternate;
  animation-duration: 1s;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in;
  background-color: #1766aa;
  border-radius: 50%;
  border: 5px solid #333333;
  color: white;
  height: 150px;
  margin: auto;
  margin-left: 0;
  width: 150px;
}

@keyframes slide {
  from {
    background-color: orange;
    color: black;
    margin-left: 0;
  }
  to {
    background-color: orange;
    color: black;
    margin-left: 80%;
  }
}

@keyframes bounce {
  from {
    background-color: orange;
    color: black;
    margin-top: 0;
  }
  to {
    background-color: orange;
    color: black;
    margin-top: 40%;
  }
}

Синтаксис

/* No animation */
animation-name: none;

/* Single animation */
animation-name: test_05;
animation-name: -specific;
animation-name: "sliding-vertically";

/* Multiple animations */
animation-name: test1, animation4;
animation-name:
  none,
  -moz-specific,
  sliding;

/* Global values */
animation-name: inherit;
animation-name: initial;
animation-name: revert;
animation-name: revert-layer;
animation-name: unset;

Значения

Это свойство задаётся одним или несколькими значениями, разделёнными запятыми:

none

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

<custom-ident>

Имя без кавычек, идентифицирующее анимацию. Этот идентификатор состоит из сочетания букв с учётом регистра a–z, цифр 0–9, символов подчёркивания (_) и/или дефисов (-). Первый символ, отличный от дефиса, должен быть буквой. Кроме того, в начале идентификатора не допускаются два дефиса. Также идентификатор не может быть none, unset, initial или inherit.

<string>

Последовательность символов, подчиняющаяся тем же правилам, что и пользовательские идентификаторы, описанные выше, за исключением того, что она заключается в двойные (") или одинарные (') кавычки. Если для имени animation-name и соответствующего правила at-rule @keyframes используется строка в кавычках, допустимы none, глобальные ключевые слова и имена, начинающиеся с символа подчёркивания или двух дефисов, хотя использовать их не рекомендуется.

Формальное определение

Формальный синтаксис

animation-name = 
  [ none | <keyframes-name> ]#

<keyframes-name> = 
  <custom-ident> |
  <string>

Примеры

Имя анимации

Эта анимация имеет animation-name со значением rotate.

HTML

<div class="box"></div>

CSS

.box {
  background-color: rebeccapurple;
  border-radius: 10px;
  width: 100px;
  height: 100px;
}

.box:hover {
  animation-name: rotate;
  animation-duration: 0.7s;
}

@keyframes rotate {
  0% {
    transform: rotate(0);
  }
  100% {
    transform: rotate(360deg);
  }
}

Результат

Наведите указатель на прямоугольник, чтобы запустить анимацию.

Примеры см. в разделе CSS-анимации.

Спецификации

Совместимость с браузерами

См. также

• Использование CSS-анимаций
• API JavaScript AnimationEvent
• Другие связанные свойства анимации: animation, animation-composition, animation-delay, animation-direction, animation-duration, animation-fill-mode, animation-iteration-count, animation-play-state, animation-timeline, animation-timing-function