Как применить keyframes для css, чтобы убрать ошибку с анимациями?

Всем ку, уже задаю третий раз по данной теме вопрос. Как мне можно исправить ошибку. Я обновляю страницу и срабатывает анимация, которая не должна быть, ведь анимация должна срабатывать лишь тогда, когда я навожу мышкой на кнопку. Я понял, что проблема в одно строчке кода, но убрав её не срабатывает анимация в обратную сторону. Все пишут про keyframe, но прочитав статью, я до сих пор не понимаю, как применить это для решения моей проблемы


Ответы (1 шт):

Автор решения: DAYMERE

Без кода трудно понять в чем ошибка. Но вот база с помощью которой будет работать анимация:

.element:hover{       
   animation: myAnimation 1s linear 0s forwards;
   // (animation: <название> <длительность> <скорость> (<задержка>, можно не указывать) forwards)
   // forwards в конце чтобы конечный результат анимации сохранился
}
@keyframes myAnimation{
   from{
        Начальное состояние
   }
   to{
        Конечное состояние
   }
}
→ Ссылка