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;
}

        
        
          
        
      

Подсказки

Секция статьи "Подсказки"