时间戳

首页 > 解决方案 > 中间的停止线动画

html - 中间的停止线动画

问题描述

我希望这条线从右到左平稳移动，但在中心它将停止 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>

标签： htmlcsscss-animations

解决方案

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

.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>

推荐阅读