按钮加载指示器边框动画

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。总时间变为8s，因为1s 每边4 面乘以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 上运行，所以在一个完整的周期（4 秒）之后，1/8 是12.5%，你想放松第 5 秒，即50% - 62.5% (12.5 * 5)。之后，我们希望将其保持在“上链”状态，直到下一个周期。

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