animation-name

Чтобы связать ключевые кадры 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;
}

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать