如何为第二个separator div的关键帧动画添加延迟以实现顺序播放？

需求描述：在项目中，需要为第二个.separator内的动画添加延迟，让其在第一个分隔符的动画完成后再启动。

解决方案代码 #

CSS 代码

body {
  background: #000;
}

.group {
  display: flex;
  gap: 1rem;
}

.separator {
  position: relative;
  flex: 1;
  height: 1px;
  margin-inline: 1.25rem;
  background: #09090a;
}

.separator>div {
  position: absolute;
  top: 0;
  left: 0%;
  width: 32px;
  height: 1px;
  background: linear-gradient(270deg, red, rgba(0, 0, 0, 0.00));
  animation: slide 3s ease-in infinite;
}

/* 为第二个分隔符的动画添加延迟，延迟时间等于第一个动画的时长 */
.group .separator:nth-of-type(2)>div {
  animation: slide 3s ease-in infinite 3s;
}

@keyframes slide {
  0% {
    left: 0%;
  }
  100% {
    left: 100%;
  }
}

HTML 代码

<div class="group">
  <div class="separator">
    <div></div>
  </div>
  <div class="separator">
    <div></div>
  </div>
</div>

关键说明 #

• 第一个分隔符的动画时长为3秒，因此给第二个分隔符的动画设置3秒延迟，确保第一个动画完成后第二个才启动。
• 通过nth-of-type(2)精准选中第二个.separator元素，在其animation属性末尾添加延迟参数，即可实现动画的顺序播放效果。

内容的提问来源于stack exchange，提问作者xyz.sml