延迟动画，使其在Xs后向另一个方向移动

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>

任何关于数学改进的建议，我都赞成。

编辑
Final result

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>