animation-name

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

        
          
          .element {  animation-name: left-to-right;}
          .element {
  animation-name: left-to-right;
}

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

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

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

        
          
          @keyframes left-to-right {  0% {    transform: translateX(0);  }  100% {    transform: translateX(calc(100vw - 250px));  }}@keyframes bottom-to-top {  0% {    transform: translateY(0);  }  100% {    transform: translateY(calc(-100vh + 250px));  }}
          @keyframes left-to-right {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(calc(100vw - 250px));
  }
}

@keyframes bottom-to-top {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(calc(-100vh + 250px));
  }
}

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

С помощью свойства animation-name мы указываем, какую анимацию нужно применить к элементу.

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

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

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

.element:hover {
  animation: none;
}

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