Элемент выглядит странно с анимацией, установленной два раза

Question

Итак, я получил эту ручку: https://codepen.io/tobiasglaus/pen/NedpxQ

---

Всякий раз, когда он «щелкает», круг должен быть анимирован. В анимации 2 клика, поэтому я просто добавил анимацию 2 раза, например:

animation: circle .3s forwards, circle .3s forwards;
animation-delay: 1.7s, 4.9s;

Проблема в том, что круг больше не круг, а размытый квадрат:

Но это должно выглядеть так:

Я не могу воспроизвести проблему в SO-фрагменте, но, поскольку мне нужно предоставить минимальный пример кода, вот фрагмент того, как он должен выглядеть.

Примечание. При просмотре анимации с помощью Chrome DevTools анимация выглядит правильно.

.circle:after{
  content:"";
  position:absolute;
  top:20px;
  left:20px;
  width:50px;
  height:50px;
  border-radius:50%;
  border:2px solid #222f3e;
  animation:circle .3s forwards, circle .3s forwards;
  animation-delay:0s, 1s;
  opacity:0;
  transform:scale(0);
}

@keyframes circle {
  0%{
    transform:scale(0);
  }
  50%{
    opacity:1;
  }
  100%{
    transform:scale(1);
    opacity:0;
  }
}

<div class="circle"></div>

Answer 1

Я до сих пор не знаю, почему круг выглядит странно, но мне удалось найти решение, которое работает:

Вот что у меня было:

animation: circle .3s forwards, circle .3s forwards;
animation-delay: 1.7s, 4.9s;

и анимация:

@keyframes circle {
  0%{
    transform:scale(0);
  }
  50%{
    opacity:1;
  }
  100%{
    transform:scale(1);
    opacity:0;
  }
}

Вместо того, чтобы вызывать анимацию дважды, я создал одну большую анимацию:

animation: circle 3.5s forwards;
animation-delay:1.7s;

и это анимация:

@keyframes circle{
  0%{
    transform:scale(0);
  }
  4%{
    opacity:1;
  }
  8%{
    transform:scale(1);
    opacity:0;
  }
  92%{
    transform:scale(0);
    opacity:0;
  }
  96%{
    opacity:1;
  }
  100%{
    transform:scale(1);
    opacity:0;
  }
}

Таким образом, начальная длительность анимации 0,3 с теперь равна 8%, а задержка анимации между анимациями равна 74% от нуля в анимации.

Answer 2

Вы можете использовать свойство animation-iteration-count , например:

animation: circle .3s forwards;
animation-iteration-count: 2;

Animation-iteration-count устанавливает количество раз, которое цикл анимации должен быть воспроизведен перед остановкой. Вы хотите, чтобы щелчок происходил дважды, поэтому мы устанавливаем значение 2.