Animation in CSS. How can I make :hover not interrupt the current animation (from - to)?

Question

css

According to the animation, the element should move from .A to .B, and on the way when hovering over the element, it should increase.
The problem is that when you hover over an element, it immediately hits the end point, and only there the hover styles work, and then the animation starts again (((

.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;} 
}

Answer 1

You can for example like this