How to force @keyframes play till of it's end after on.(mouseout)?

I have an keyframe animation which plays when i hover on element. But after mouseout event, it stops too abruptly. How could i force it play till it's end? I tried on.(animationend) event - it doesn't work. Transform origin and huge delay - either don't work. Thanks.

http://ift.tt/2lcuBhm

class Main {
  constructor() {
    
  }


  waveOn() {
    $(this).addClass('wave-active');
  }

  waveOut() {
    var elem = $('.info__block');

    elem.removeClass('wave-active');
  }

  jsInit() {
    $('.info__block').hover(this.waveOn);
    $('.info__block').on('animationend', this.waveOut)
  }

}

new Main().jsInit();

  

.info__block {
        width: 100px;
        height: 100px;
        background: aqua;
        border-radius: 50px;
        position: relative;
        display: flex;
        justify-content: center;
}

.info__block:before {
       content: '';
       position: absolute;
       width: 100%;
       height: 100%;
       border-radius: 50px;
       border-top: 2px solid aqua;
}

.info__block:hover:before {
       animation: link-line 2.5s infinite .5s linear;
}

@keyframes link-line {
  0% {
    transform: translateY(0);
    opacity: 1;
  }
  60% {
    opacity: 0;
  }
  100% {
    transform: translateY(-50%) scale(1.6);
    opacity: 0;
  }
}

<div class="info__block info__block-1">
</div>