How to let keyframes finish the animation after the event is removed?

Question

css

Hello. There is an animation of waves coming from the block. The animation fires on hover, but when the hover disappears, the animation stops very abruptly and returns to its original state. How can I let the animation smoothly finish playing the animation after "hate"? Thank you.
codepen.io/anon/pen/jBWrYR

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

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

Answer 1

Found the problem. The property animation-iteration-count: infinite does not have an animationend event. Will have to do without it.

Answer 2

stackoverflow.com/questions/16765727/css3-animatio...