Анимация в CSS. Как сделать, чтобы :hover не прерывал текущую анимацию (from – to)?

По анимации элемент должен перемещаться из .А в .В, и на пути при наведении на элемент - он должен увеличиваться .
Проблема в том, что когда наводишь на элемент – он сразу попадает в конечную точку , и только там срабатывать стили hover, а потом анимация начинается заново(((
.balloon{
    position:fixed;
    right:5px;
    bottom:-40px;
    z-index:999;
  
  animation:ballon_animation 8s ;
}

.balloon:hover{
      -webkit-animation-name: hvr-pop;
  animation-name: hvr-pop;
  -webkit-animation-duration: 0.3s;
  animation-duration: 0.3s;
  -webkit-animation-timing-function: linear;
  animation-timing-function: linear;
  -webkit-animation-iteration-count: 1;
  animation-iteration-count: 1;
}

@keyframes ballon_animation
{
from {position:fixed;
    right:5px;
    bottom:-190px;
    z-index:999;} 



to {position:fixed;
    right:5px;
    bottom:-40px;
    z-index:999;} 
}
  • Вопрос задан
  • 850 просмотров
Решения вопроса 1
sfi0zy
@sfi0zy Куратор тега CSS
Creative frontend developer
Можно например вот так
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы