css - 不透明度关键帧动画的计时

Question

我正在尝试为一些简单的 Font Awesome 图标设置不透明度动画，但我无法获得正确的时间。

基本上，在 5 个圆圈中，我希望两端的最后 3 个一起制作动画。因此，当最左边的 3 个打开时，剩余的最右边的 2 个关闭，反之亦然。我有点在两端的最后 2 个上发生这种情况，但它不是很顺利，我还没有考虑中间的那个。我正在反转两端的动画，但我不确定是否应该只创建单独的关键帧。

所需的模式:https://youtu.be/zPPhFs1Y4Ts?t=89

@keyframes blinker-skip {
  0% {
    opacity: 0;
  }
  10% {
    opacity: 0;
  }
  20% {
    opacity: 0;
  }
  30% {
    opacity: 0;
  }
  40% {
    opacity: 0;
  }
  50% {
    opacity: 0;
  }
  60% {
    opacity: 0;
  }
  70% {
    opacity: 1;
  }
  80% {
    opacity: 0;
  }
  90% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}

.boosted-led-blink-skip-first {
  animation: blinker-skip 1s linear infinite;
}

.boosted-led-blink-skip-second {
  animation: blinker-skip 1s linear reverse infinite;
}

.boosted-led-blink-middle {
  animation: blinker 1s step-start infinite;
}

.boosted-led-orange {
  color: #ff8533;
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css">
<div class="boosted-leds">
  <span class="boosted-led-orange boosted-led-blink-skip-first boosted-led"><i class="fas fa-circle"></i></span>
  <span class="boosted-led-orange boosted-led-blink-skip-first boosted-led"><i class="fas fa-circle"></i></span>
  <span class="boosted-led-orange boosted-led-blink-middle boosted-led"><i class="fas fa-circle"></i></span>
  <span class="boosted-led-orange boosted-led-blink-skip-second boosted-led"><i class="fas fa-circle"></i></span>
  <span class="boosted-led-orange boosted-led-blink-skip-second boosted-led"><i class="fas fa-circle"></i></span>
</div>

演示:https://codepen.io/ourcore/pen/GRZYjxZ

Answer 1

看起来您希望点在一侧显示 50% 的时间，然后在另一侧显示 50% 的时间。

您可以通过将不透明度从 0-49% 设置为 0，然后将其设置为 1 以达到 50-100%。您已经对第二组使用了 reverse，所以这将(显然!)以相反的方式运行第二组。

工作示例:

.boosted-led-orange {
  color: #ff8533;
}

@keyframes blinker-skip {
  0% {
    opacity: 0;
  }
  49% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 1;
  }
}

.boosted-led-blink-skip-first {
    animation: blinker-skip 1s linear infinite;
  }

.boosted-led-blink-skip-second {
    animation: blinker-skip 1s linear reverse infinite;
  }

.boosted-led-blink-middle {
    animation: blinker 1s step-start infinite;
  }

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css">

<div class="boosted-leds">
  <span class="boosted-led-orange boosted-led-blink-skip-first boosted-led"><i class="fas fa-circle"></i></span>
  <span class="boosted-led-orange boosted-led-blink-skip-first boosted-led"><i class="fas fa-circle"></i></span>
  <span class="boosted-led-orange boosted-led-blink-middle boosted-led"><i class="fas fa-circle"></i></span>
  <span class="boosted-led-orange boosted-led-blink-skip-second boosted-led"><i class="fas fa-circle"></i></span>
  <span class="boosted-led-orange boosted-led-blink-skip-second boosted-led"><i class="fas fa-circle"></i></span>
</div>

请注意，您只需要包括发生变化的时间的关键帧 - 不需要包括中间的关键帧。