修复 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，但我认为在这种情况下可以避免重复。

---

原因：

我遇到的问题是第 4 个 div（红色）最初显示时没有淡入淡出

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

如果您为第三个或第二个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：

向后

动画将在应用到目标后立即应用第一个相关关键帧中定义的值，并在动画延迟期间保留此值。