html - 修复 CSS 加载器中的动画循环

Question

我在 CSS 中有一个加载器动画。它以圆形方式旋转 4 个 div。我遇到的问题是第 4 个 div(红色)最初显示时没有淡入淡出，不会中断动画的流动(您可能需要刷新才能看到)。

解决此问题以改进动画循环的最佳方法是什么？

代码(https://jsfiddle.net/bduaxvmp/):

.loader {
  position: relative;
  height: 50px;
  width: 50%;
  left: 45.5%
}
.loader .bullet {
  position: absolute;
  padding: 5px;
  background: green;
  animation: animIn 1s ease-in-out 0s infinite;
}
.loader .bullet:nth-child(1) {
  animation-delay: 0.0s;
}
.loader .bullet:nth-child(2) {
  animation-delay: 0.15s;
}
.loader .bullet:nth-child(3) {
  animation-delay: 0.3s;
}
.loader .bullet:nth-child(4) {
  animation-delay: 0.45s;
  background: red;
}
@-webkit-keyframes animIn {
  0% {
    transform: translateX(-100px);
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    transform: translateX(100px);
    opacity: 0;
  }
}

<div class="loader">
  <div class="bullet"></div>
  <div class="bullet"></div>
  <div class="bullet"></div>
  <div class="bullet"></div>
</div>

Answer 1

解决方案:

将动画的animation-fill-mode设置为backwards。为填充模式使用此选项将使元素在 animation-delay 期间采用 0% 帧的状态，因此所有元素都将是透明的并且在他们的翻译位置，直到动画真正开始。

.loader .bullet {
    position: absolute;
    padding: 5px;
    background: green;
    animation: animIn 1s ease-in-out 0s infinite backwards;
}

.loader {
  position: relative;
  height: 50px;
  width: 50%;
  left: 45.5%
}
.loader .bullet {
  position: absolute;
  padding: 5px;
  background: green;
  animation: animIn 1s ease-in-out 0s infinite backwards;
}
.loader .bullet:nth-child(1) {
  animation-delay: 0.0s;
}
.loader .bullet:nth-child(2) {
  animation-delay: 0.15s;
}
.loader .bullet:nth-child(3) {
  animation-delay: 0.3s;
}
.loader .bullet:nth-child(4) {
  animation-delay: 0.45s;
  background: red;
}
@-webkit-keyframes animIn {
  0% {
    transform: translateX(-100px);
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    transform: translateX(100px);
    opacity: 0;
  }
}
@keyframes animIn {
  0% {
    transform: translateX(-100px);
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    transform: translateX(100px);
    opacity: 0;
  }
}

<div class="loader">
  <div class="bullet"></div>
  <div class="bullet"></div>
  <div class="bullet"></div>
  <div class="bullet"></div>
</div>

或者，您也可以将与 0% 框架相同的属性设置为元素的默认状态，并避免将 animation-fill-mode 设置为 backwards 但我觉得在这种情况下可以避免重复。

---

原因:

The issue I'm having is that the 4th div (red) is shown initially with no fade

请注意，问题不只是第 4 个 div。实际上，问题出在所有具有动画延迟的 div 元素上。视觉上只有第 4 个 div 出现问题，因为所有元素都是绝对定位的，而第 4 个 div 出现在其余部分之上，因为它在 DOM 中较晚。

如果您为第 3 个或第 2 个 div 设置不同的背景颜色和更高的 z-index，您会发现同样的问题也会发生在它们身上。

.loader {
  position: relative;
  height: 50px;
  width: 50%;
  left: 45.5%
}
.loader .bullet {
  position: absolute;
  padding: 5px;
  background: green;
  animation: animIn 1s ease-in-out 1s infinite;
}
.loader .bullet:nth-child(1) {
  animation-delay: 0.0s;
}
.loader .bullet:nth-child(2) {
  animation-delay: 0.15s;
  /*background: blue;
    z-index: 4 */
}
.loader .bullet:nth-child(3) {
  animation-delay: 0.3s;
  background: yellow;
  z-index: 2;
}
.loader .bullet:nth-child(4) {
  animation-delay: 0.45s;
  /*background: red;*/
}
@-webkit-keyframes animIn {
  0% {
    transform: translateX(-100px);
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    transform: translateX(100px);
    opacity: 0;
  }
}
@keyframes animIn {
  0% {
    transform: translateX(-100px);
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    transform: translateX(100px);
    opacity: 0;
  }
}

<div class="loader">
  <div class="bullet"></div>
  <div class="bullet"></div>
  <div class="bullet"></div>
  <div class="bullet"></div>
</div>

出现此问题的原因是动画的工作方式。任何动画都将继续保持其默认状态(在动画外部指定)，直到延迟计时器到期为止。将 animation-fill-mode 设置为 backwards 使动画即使在延迟期间也采用第一个适用帧的状态，从而避免了该问题。

来自 MDN :

backwards

The animation will apply the values defined in the first relevant keyframe as soon as it is applied to the target, and retain this during the animation-delay period.