`animation-name`

Время чтения: меньше 5 мин

Кратко

Чтобы связать ключевые кадры CSS-анимации с конкретным элементом, используется свойство animation-name.

Пример

        
          
          .element {  animation-name: circle-to-square;}
          .element {
  animation-name: circle-to-square;
}

Как понять

Благодаря animation-name браузер понимает, какие именно ключевые кадры нужно применять к выбранному элементу.

Как пишется

В качестве значения указывается имя, заданное для ключевых кадров анимации в директиве @keyframes.

Кроме имени анимации можно указать none, значение по умолчанию. Означает отсутствие анимации. Удобно использовать для сброса анимации.

Например, можно указать это значение для элемента по ховеру:

        
          
          .element {  animation: some-animation;}.element:hover {  animation: none;}
          .element {
  animation: some-animation;
}

.element:hover {
  animation: none;
}

Подсказки