延迟动画，在X秒后使其改变方向

Question

我越来越深入了解动画属性和关键帧。我正在制作这个加载器，但是使用“animation-delay”和多个动画方法让它从右到左走起来有点困难。

这个小点应该从左到右、再从右到左移动。当其他点返回另一个方向并重新开始时，停在那里，直到其他点再次通过……

我的解决方案是：
完整的解决方案请参见jsfiddle。

body {
  background-color: #111111;
}

[data-am-animation] {
  box-sizing: border-box;
  background-color: white;
  flex-direction: row;
  margin: 30px;
  position: relative;
  height: 180px;
  width: 120px;
}
[data-am-animation] .dot {
  background-color: deepskyblue;
  position: absolute;
  height: 30px;
  width: 30px;
  border-radius: 50%;
}
[data-am-animation] .dot.down {
  left: 30px;
  animation-name: load-down;
  animation-duration: 5s;
  animation-timing-function: linear;
  animation-direction: alternate;
  animation-iteration-count: infinite;
}
[data-am-animation] .dot.up {
  left: 60px;
  animation-name: load-up;
  animation-duration: 5s;
  animation-timing-function: linear;
  animation-direction: alternate;
  animation-iteration-count: infinite;
}
[data-am-animation] .dot.through {
  left: 0;
  top: 50%;
  margin-top: -15px;
  /*animation-name: load-through;
  animation-duration: ($animation-speed / 2.6);
  animation-timing-function: linear;
  animation-direction: alternate;
  animation-iteration-count: infinite; 
  animation-delay: ($animation-speed / 1.3);*/
  animation: load-through-right 1.66667s linear infinite 3.125s, load-through-left 1.66667s linear infinite 3.125s;
}

/* keyframes start */
@keyframes load-down {
  0% {
    transform: translate(0, 0);
    background-color: deepskyblue;
  }
  100% {
    transform: translate(0, 150px);
    background-color: deeppink;
  }
}
@keyframes load-up {
  0% {
    transform: translate(0, 150px);
    background-color: deeppink;
  }
  100% {
    transform: translate(0, 0);
    background-color: deepskyblue;
  }
}
@keyframes load-through-right {
  0% {
    transform: translate(0, 0);
    background-color: deepskyblue;
  }
  100% {
    transform: translate(90px, 0);
    background-color: deeppink;
  }
}
@keyframes load-through-left {
  0% {
    transform: translate(90px, 0);
    background-color: deeppink;
  }
  100% {
    transform: translate(0, 0);
    background-color: deepskyblue;
  }
}
/* keyframes end */

<div data-am-animation>
  <div class="dot through"></div>
  <div class="dot down"></div>
  <div class="dot up"></div>
</div>

有关数学改进的任何建议，我都非常支持。

编辑
最终结果

- Dejan.S

---

为什么需要动画？为什么不用1来实现呢？ - Mosh Feu

@MoshFeu 提到的建议我都支持。如果你有任何关于如何实现我想要的解决方案的想法，我完全赞成。以前我只做过基础的东西。这就是为什么我在这里问问题的原因 :) - Dejan.S

Answer 1

这里有一种单个动画的方法。如果这是您想要的方向，或者我没有理解您的意愿，请告诉我。

body {
  background-color: #111111;
}

[data-am-animation] {
  box-sizing: border-box;
  background-color: white;
  flex-direction: row;
  margin: 30px;
  position: relative;
  height: 180px;
  width: 120px;
}
[data-am-animation] .dot {
  background-color: deepskyblue;
  position: absolute;
  height: 30px;
  width: 30px;
  border-radius: 50%;
}
[data-am-animation] .dot.down {
  left: 30px;
  animation-name: load-down;
  animation-duration: 5s;
  animation-timing-function: linear;
  animation-direction: alternate;
  animation-iteration-count: infinite;
}
[data-am-animation] .dot.up {
  left: 60px;
  animation-name: load-up;
  animation-duration: 5s;
  animation-timing-function: linear;
  animation-direction: alternate;
  animation-iteration-count: infinite;
}
[data-am-animation] .dot.through {
  left: 0;
  top: 50%;
  margin-top: -15px;
  /*animation-name: load-through;
  animation-duration: ($animation-speed / 2.6);
  animation-timing-function: linear;
  animation-direction: alternate;
  animation-iteration-count: infinite; 
  animation-delay: ($animation-speed / 1.3);*/
  animation: load-through-right 5s linear infinite;
}

/* keyframes start */
@keyframes load-down {
  0% {
    transform: translate(0, 0);
    background-color: deepskyblue;
  }
  100% {
    transform: translate(0, 150px);
    background-color: deeppink;
  }
}
@keyframes load-up {
  0% {
    transform: translate(0, 150px);
    background-color: deeppink;
  }
  100% {
    transform: translate(0, 0);
    background-color: deepskyblue;
  }
}
@keyframes load-through-right {
  0%, 20% {
    transform: translate(0, 0);
    background-color: deepskyblue;
  }
  50%, 70% {
    transform: translate(90px, 0);
    background-color: deeppink;
  }
}
@keyframes load-through-left {
  0% {
    transform: translate(90px, 0);
    background-color: deeppink;
  }
  100% {
    transform: translate(0, 0);
    background-color: deepskyblue;
  }
}
/* keyframes end */

<div data-am-animation>
  <div class="dot through"></div>
  <div class="dot down"></div>
  <div class="dot up"></div>
</div>

- Mosh Feu

---

我可能能够微调它。对于这种情况下的百分比不太确定，是指在0、20%时应该保持静止在0、0位置，50、70%也是如此吗？ - Dejan.S

它会停留在 0, 0 直到达到 20%，并且在 50% 时也是如此 - 等待直到 70%。明白吗？ - Mosh Feu