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

你可以利用 animation-iteration-count 财产,就像这样:

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

动画迭代计数设置停止前应播放动画循环的次数。您希望单击发生两次,因此我们将值设置为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%。