Как дать keyframes доиграть анимацию, после удаления события?

Question

[Worddoc]

Здравствуйте. Есть анимация волн, идущих от блока. Анимация срабатывает при наведении, но когда наведение пропадает, анимация очень резко прекращается и возвращается в исходное состояние. Как можно дать анимации плавно доиграть анимацию после "ненаведения"? Спасибо.

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

[Worddoc]

Нашел проблему. Свойство animation-iteration-count: infinite не имеет события animationend. Придется обходится без него.

Answer 2

[Артём]

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

Comments

[Worddoc]

Не помогает. Да и в том посте работает, не как надо. Нужно, чтобы после снятия наведения анимация продолжала играть и завершилась

[Артём]

Worddoc: Вы только первый ответ изучили или внимательно просмотрели всё?
Вот это например jsfiddle.net/u7vXT

[Worddoc]

Артём: Этот вариант я уже опробовал. Это вариант почему-то не работает. Вернее событие on animationEnd не работает.

[Worddoc]

Артём: jsfiddle.net/u7vXT/328