css - 一键后，我可以使用CSS来显示然后消失边框吗？

谢谢阅读。我正在尝试检查一个函数是否为false。如果为假，我想在2秒内将边框颜色更改为红色，出现并消失，出现并消失。我只是尝试使用CSS动画来实现它，但是它只出现一次。
https://codesandbox.io/s/38qvr0j3lp

我想知道是否有使用CSS的方法来实现它。任何帮助，将不胜感激。

最佳答案

这是一个小演示-单击时，我在按钮元素中添加了一个animation（通过keyframes而不是transition）。

关键帧动画以红色边框开始，中间有透明边框。通过将其与steps(1)结合使用，动画被视为由两个帧（在0%和50%处）组成，交替显示透明和红色。我在1秒钟内（即2）两次运行该动画（即1s）。

在JS中，请注意，如果要删除blink类，请在10ms后读取它。如果不删除并读取该属性，则无法重新触发CSS关键帧动画。

function blink(el) {
  el.classList.remove("blink")

  setTimeout(function() {
    el.classList.add("blink")
  }, 10);
}

button {
  border: 1px solid transparent;
  outline: none;
}

.blink {
  animation: border-blink 1s steps(1) 2;
}

@keyframes border-blink {
  0% {
    border-color: red;
  }

  50% {
    border-color: transparent;
  }
}

<button onclick="blink(this)">Click Me</button>