css 只能使用一次动画

Question

我想在点击按钮时制作一个脉冲动画： 这就是动画中间的样子。 因此，当我单击按钮时，会播放动画。但只有一次。因此，当我再次单击该按钮时，什么也没有发生。但是，除了按钮之外，您还可以在单​​击某处时“重置”动画。但我不想要这个，所以每次我按下按钮时都会播放动画。

没有java脚本

.pulse:focus,
.pulse:active {
  -webkit-animation: pulse 1s;
  animation: pulse 1s;
  box-shadow: 0 0 0 2em rgba(255, 255, 255, 0);
}

@-webkit-keyframes pulse {
  0% {
    box-shadow: 0 0 0 0 var(--hover);
  }
}

@keyframes pulse {
  0% {
    box-shadow: 0 0 0 0 var(--hover);
  }
}
.pulse {
  --color: #ef6eae;
  --hover: #ef8f6e;
  width: 300px;
  height:40px;
  text-align: middle;
  color: #01cfa9;
  background: none;
  border: 2px solid;
  font: inherit;
  line-height: 1;
  margin: 0.5em;
  background: #17181c;
}

<button style="text-align:center" class="pulse">INVITE NOW!!</button>

Answer 1

在动画完全播放后，您需要从该按钮上移除焦点，通过此脚本：

 <button style="text-align:center" class="pulse" onclick="blurInput()">INVITE NOW!!</button>
    <script>
        function blurInput() {
            setTimeout(() => {
                document.getElementsByClassName('pulse')[0].blur();
            }, 1000);
        }
    </script>

setTimeout 的第二个参数 = 你在 css 中的动画时间