Как применить анимацию только на ховер?

Question

[main11]

на сайте сделал стрелку, которая постоянно туда сюда кошмарится
как ей задать что бы она только при наведении работала?
нифига не пойму
в css вот так

.arrow{
            position: absolute;
            left: 45px;
            top: 80px;
            -webkit-animation: arrow 3s linear infinite;
            animation: arrow 3s linear infinite;
            transition: 0.4s filter ease-in-out;
            transform:none;
            &:hover{
               filter: blur(0.8px);
            }
         }



@-webkit-keyframes arrow {
   0% {transform:rotate(-45deg);}
   50% {transform:rotate(90deg);}
   100% {transform:rotate(-45deg);}
 }

вообще мозги поплыли

Answer 1

[Вадим]

.arrow{
            position: absolute;
            left: 45px;
            top: 80px;
            transition: 0.4s filter ease-in-out;
            transform:none;
            &:hover{
               animation: arrow 3s linear infinite;
               filter: blur(0.8px);
            }
         }

Comments

[main11]

Боже мой, Благодарю
вообще не варит башка уже))
Спасибо!