css - 反向无限淡入淡出线

Question

我有三个底部带有边框的跨度，需要它从上到下淡入淡出并反转方向。
如果我有 2 次迭代计数但无限不能正常工作，它工作正常。

.line {
  border-bottom: 0.2em solid #333;
  display: block;
  margin: 0 auto;
  margin-top: 0.3em;
  width: 1.5em;
}
.lines span[class='line']:nth-child(1) {
  animation: 1.5s ease-in-out 0.2s 2 alternate fade_line;
}
.lines span[class='line']:nth-child(2) {
  animation: 1s ease-in-out 0.7s 2 alternate fade_line;
}
.line {
  animation: 0.5s ease-in-out 1.2s 2 alternate fade_line;
}
@keyframes fade_line {
  0%, 50% {
    border-bottom: 0.2em solid #333;
  }
  50%,
  100% {
    border-bottom: 0.2em solid #ddd;
  }
}

<div class="lines">
  <span class="line"></span>
  <span class="line"></span>
  <span class="line"></span>
</div>

Fiddle Demo

Answer 1

动画的问题在于 animation-delay实际上仅适用于动画的第一次迭代。下面解释了为什么它在只有 2 次迭代时有效，为什么在无限次迭代时它不起作用。

为什么只有 2 次迭代它会起作用？

第一 span在 0.2s 开始动画(在 animation-delay 之后)。之间0.2s至 1.7s , 边框颜色来自 #333至 #ddd (在 0.95s 是 50% 的 1.5s 持续时间，准确地说)和在 1.7s 之间和 3.2s它从 #ddd 返回(反向)至 #333 (准确地说是在 2.45s)。

第二 span在 0.7s 开始动画.之间0.7s至 1.7s , 边框颜色来自 #333至 #ddd (准确地说是在 1.2s)和 1.7s 之间至 2.7s它从 #ddd 返回(反向)至 #333 (准确地说是在 2.2s)。

第三 span在 1.2s 开始动画.之间1.2s至 1.7s , 边框颜色来自 #333至 #ddd (准确地说是在 1.45s)和 1.7s 之间至 2.2s它从 #ddd 返回(反向)至 #333 (准确地说是在 1.95s)。

Element         | Iteration 1       | Iteration 2
---------------------------------------------------
First Span      | 0.95s             | 2.45s
Second Span     | 1.2s              | 2.2s
Third Span      | 1.45s             | 1.95s

正如您所看到的，只要只有 2 次迭代，就有一个很好的流程。

为什么当迭代次数设置为无限时它不起作用？

现在让我们看看第三次和后续迭代会发生什么:

第一 span - 之间 3.2s至 4.7s , 边框颜色来自 #333至 #ddd (准确地说是在 3.95s)和 4.7s 之间和 6.2s它从 #ddd 返回(反向)至 #333 (准确地说是在 5.45s)。

第二 span - 之间 2.7s至 3.7s边框颜色来自 #333至 #ddd (准确地说是在 3.2s)和 3.7s 之间至 4.7s它从 #ddd 返回(反向)至 #333 (准确地说是在 4.2s)。

第三 span - 之间 2.2s至 2.7s边框颜色来自 #333至 #ddd (准确地说是在 2.45s)和 2.7s 之间至 3.2s它从 #ddd 返回(反向)至 #333 (准确地说是在 2.95s)。

Element         | Iteration 1       | Iteration 2       | Iteration 3       | Iteration 4
------------------------------------------------------------------------------------------
First Span      | 0.95s             | 2.45s             | 3.95s             | 5.45s
Second Span     | 1.2s              | 2.2s              | 3.2s              | 4.2s
Third Span      | 1.45s             | 1.95s             | 2.45s             | 2.95s

正如您所看到的，流程完全困惑，因为由于动画持续时间和延迟的配置方式，动画开始重叠。

解决方案:

通常，在无限循环动画的每次迭代之间引入延迟的方法是修改关键帧，以便它们为每次迭代添加相等的延迟。我已经在 my answer here 中解释了这一点.不幸的是，由于反向动画，您的案例要复杂得多。我无法修改关键帧以符合您的期望，但我希望您会发现上述解释有助于理解该问题。

如果您乐于使用替代方法来达到相同的效果，那么您可以查看 linear-gradient背景图像以创建汉堡包效果，然后为其添加动画。

.lines {
  margin: 0 auto;
  height: 30px;
  width: 30px;
  background-image: linear-gradient(#333, #333), linear-gradient(#333, #333), linear-gradient(#333, #333);
  background-size: 100% 5px;
  background-position: 0px 5px, 0px 15px, 0px 25px;
  background-repeat: no-repeat;
  animation: bars 1.7s infinite alternate ease-in-out;
}
@keyframes bars {
  0% {
    background-image: linear-gradient(#333, #333), linear-gradient(#333, #333), linear-gradient(#333, #333);
  }
  33% {
    background-image: linear-gradient(#ddd, #ddd), linear-gradient(#333, #333), linear-gradient(#333, #333);
  }
  66% {
    background-image: linear-gradient(#ddd, #ddd), linear-gradient(#ddd, #ddd), linear-gradient(#333, #333);
  }
  100% {
    background-image: linear-gradient(#ddd, #ddd), linear-gradient(#ddd, #ddd), linear-gradient(#ddd, #ddd);
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<div class="lines"></div>

以下是使用您的初始方法的解决方案(由 vals 友情提供)。但是你不能重用关键帧!

.line {
  border-bottom: 0.2em solid #333;
  display: block;
  margin: 0 auto;
  margin-top: 0.3em;
  width: 1.5em;
}
.line {
  animation: 1.7s ease-in-out infinite alternate fade_line1;
}
.line:nth-child(2) {
  animation-name: fade_line2;
}
.line:nth-child(3) {
  animation-name: fade_line3;
}
@keyframes fade_line1 { /* use 25% instead of 30% if the splits need to be equal among all 3 */
  0%, 30% {
    border-bottom-color: #333;
  }
  30%, 100% {
    border-bottom-color: #ddd;
  }
}
@keyframes fade_line2 {
  0%, 50% {
    border-bottom-color: #333;
  }
  50%, 100% {
    border-bottom-color: #ddd;
  }
}
@keyframes fade_line3 { /* use 75% instead of 70% if the splits need to be equal among all 3 */
  0%, 70% {
    border-bottom-color: #333;
  }
  70%, 100% {
    border-bottom-color: #ddd;
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<div class="lines">
  <span class="line"></span>
  <span class="line"></span>
  <span class="line"></span>
</div>