按钮加载指示器边框动画

Question

我想在等待异步调用完成时为按钮设置动画。禁用该按钮并在其中间或旁边放置一个旋转器显然是有效的，但现在感觉有点无聊。我认为在循环中添加一些边框动画会很不错。如同

https://codepen.io/sarath-ar/pen/dMKxxM

具体来说，他们演示了第三个按钮。它在悬停时很好地填充了边框，但我想象的是在它填充边框之后，它然后在同一方向上撤消边框颜色。如果你愿意的话，它会“追逐”其他动画。

我正在摆弄他们的CSS，但我似乎不知道如何循环边框动画（我确实成功地反转了动画），但由于 :before 和 :after ，我很难循环它。

所以我想主要的任务是，当动画依赖于 ::before 和 ::after css 选择器时，如何循环动画。为了简单起见，我将如何循环下面的CSS？（我意识到这并不是所有的CSS，但一般来说你会如何循环它？）

.btn-1::before{
  right: 0;
  top: 0;
}
.btn-1::after{
  left: 0;
  bottom: 0;
}
.btn-1:hover::before, .btn-1:hover::after{
  transition-delay: 0s;
}

Answer 1

您想要使用的是 CSS 动画，并让它通过animation-iteration-count: infinite.

这是它的样子：https ://codepen.io/jerrylow/pen/eXmroN?editors=1100

为了简化成像，我们希望每个边缘的持续时间为1s。总时间变为8s41s面的每面乘以 2，因为存在展开周期。一方的动画如下所示：

@keyframes btn-border-top {
  0% {
    left: auto;
    right: 0;
    width: 0%;
  }
  12.5% {
    left: auto;
    right: 0;
    width: 100%;
  }
  12.6% {
    left: 0;
    right: auto;
  }
  50% {
    width: 100%;
  }
  62.5% {
    width: 0%;
  }
  100% {
    left: 0;
    right: auto;
    width: 0%;
  }
}

动画将持续运行8s，因此 1/8 是12.5%在完整周期 (4 秒) 之后，您希望在第 5 秒放松，即50% - 62.5%(12.5 * 5)。之后，我们希望将其保持在“上紧”状态，直到下一个周期。

编辑：如果您希望在下一个周期开始之前开始一个周期的重叠，您可以通过自己计算时间来使用百分比。