@Worddoc
Frontend explorer

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

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

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;
  }
}
  • Вопрос задан
  • 507 просмотров
Решения вопроса 1
@Worddoc Автор вопроса
Frontend explorer
Нашел проблему. Свойство animation-iteration-count: infinite не имеет события animationend. Придется обходится без него.
Ответ написан
Комментировать
Пригласить эксперта
Ответы на вопрос 1
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы