Как убрать свойство @-webkit-keyframes?

Question

[rootnoroot]

Каким убрать свойство @-webkit-keyframes для экранов менее 1200пикс?
В общем
есть картинки-куски фона, которые двигаются
задал в сss по @-webkit-keyframes
напр.
<img class="f2" src="./img/f2.png"/>

.f2{
   position: absolute;
   right: 0;
   top: 0;
   animation: blink2 6s linear infinite;
   @media screen and (max-width: 1200px) {
      display: none!important;
   }

 }
 @-webkit-keyframes blink2 {
   0% {right:0px; top:0px;}
   50% {right:-80px; top:-80px;}
   100% {right:0px; top:0px;}
   
 }

для экранов меньше 1200 не могу отключить или спрятать эти картинки
продолжают двигаться
задаю картинке display none, вообще ничего не происходит
картинка не прячется

Answer 1

[Сергей delphinpro]

Если у вас не sass, то css не так медиа пишутся

.f2{
    position: absolute;
    right: 0;
    top: 0;
    animation: blink2 6s linear infinite;
}
@media screen and (max-width: 1200px) {
    .f2 {
        display: none; /* скрыть блок полностью */
        animation: none; /* или только убрать анимацию */
    }
}

Comments

[rootnoroot]

я в less пишу
спасибо