两次设置动画看起来很奇怪的元素

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

You can make use of the animation-iteration-count property, like so:

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

Animation-iteration-count sets the number of times an animation cycle should be played before stopping. You want the click to happen twice, so we set the value to 2.

Answer 2

我仍然不知道为什么圆圈怪异地出现，但是我设法提出了一个可行的解决方案：

那就是我拥有的：

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.3s现在等于8％，并且动画之间的动画延迟等于动画中没有动画的74％。