Анимация в 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;} 
}