css - 按钮加载指示器边框动画

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，因为 4 边每边 1s 乘以 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% 在一个完整的循环 (4s) 之后你想放松第 5 秒，即 50% - 62.5% (12.5 * 5)。之后，我们希望将其保持在“winded”状态，直到下一个周期。

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