中间的停止线动画

Question

我希望这条线从右到左平稳移动，但在中心它将停止 4-5 秒。在这里我们还可以添加更多的线，当第一条线从右侧到达中心时，它停在那里并等待另一条线，当所有线都到达中心然后所有线停在那里几秒钟然后线再次开始在右侧移动.这将继续无限循环。

.spinner {
  position: relative;
  top: 0;
  left: 0;
  width: 150px;
  border: 15px solid transparent;
  border-top-color: red;
  animation: load 5s infinite ease-in-out;
}

#div {
  animation-timing-function: cubic-bezier(0, 1, 1, 1);
}

@keyframes load {
  0% {
    opacity: 0;
    left: 80%;
  }
  50% {
    opacity: 1;
    left: 45%;
  }
  100% {
    opacity: 0;
    left: 10%;
  }
}

<div id="div" class="spinner"></div>

Answer 1

“保持”动画 4 秒 意味着它将占用初始动画持续时间的80% > 你定义的。因此，为了做到这一点，只需将中间的关键帧定义为从10%到90%，在两边留下等量的10%：

.spinner {
  position: relative;
  top: 0;
  left: 0; 
  width: 150px;
  border: 15px solid transparent;
  border-top-color: red; 
  animation: load 5s infinite ease-in-out;
}

#div {animation-timing-function: cubic-bezier(0,1,1,1)}

@keyframes load {
  0% {
    opacity: 0;
    left: 80%;      
  }
  10%, 90% {
    opacity: 1;
    left: 45%;
  }
  100% {
    opacity: 0;
    left: 10%;
  }
}

<div id="div" class="spinner"></div>