Html CSS3动画序列不工作

我有一个简单的CSS3动画，可以淡入淡出：

@keyframes pulse {
    0% {
        opacity: 0;
    }

    50% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

我还有三个带ID的跨距，我想彼此淡入，一次只显示一个

<h3>
  <span id="first">First.</span> 
  <span id="second">Second.</span> 
  <span id="third">Third.</span>
</h3>

h3 {
  position: relative;
}

h3 span {
  position: absolute;
  right: 0;
  left: 0;
  opacity: 0.025;
}

h3 span#first {
  animation: pulse 5s infinite ease-in-out;
}

h3 span#second {
  animation: pulse 5s infinite ease-in-out;
  animation-delay: 5s;
}

h3 span#third {
  animation: pulse 5s infinite ease-in-out;
  animation-delay: 10s;
}

第一。
第二
第三
h3{
位置：相对位置；
}
h3跨度{
位置：绝对位置；
右：0；
左：0；
不透明度：0.025；
}
h3跨度#第一{
动画：脉冲5s无限轻松输入输出；
}
h3跨距#秒{
动画：脉冲5s无限轻松输入输出；
动画延迟：5s；
}
h3跨度#第三{
动画：脉冲5s无限轻松输入输出；
动画延迟：10秒；
}

我已经将每个

span

的动画设置为持续5秒，而第二个和第三个动画在前一个动画结束后分别有5秒和10秒的延迟，但这不是结果，第二个和第三个

span

同时加载。我怎样才能做到这一点

演示：

---

提前谢谢

您不必使延迟等于动画时间，因为第二个元素在一次插入后将具有与第一个元素相同的动画（5s）。您需要使延迟等于动画时间的一半。下面是一个只有2个的示例：

@关键帧脉冲{
0% {
不透明度：0；
}
50% {
不透明度：1；
}
100% {
不透明度：0；
}
}
h3{
位置：相对位置；
}
h3跨度{
位置：绝对位置；
右：0；
左：0；
不透明度：0.025；
}
h3跨度#第一{
动画：脉冲5s无限轻松输入输出；
}
h3跨距#秒{
动画：脉冲5s无限轻松输入输出；
动画延迟：2.5s；
}

第一。
第二

您必须将所有三个跨距的总时间定义为动画时间-15秒，并相应地调整关键帧，使其仅占总时间的三分之一，从不透明度0到1再回到0（5秒/33%）：

---

这是一个代码笔：

在笔上，我先看到，然后是第二个，然后是全部3个。所有3个都将永远持续，这不是你想要的行为吗？你不必做决定=动画的时间。。他们最后的表现也会一样——看看我的回答，我明白了！我喜欢这个解释。谢谢

@keyframes pulse {
    0% {
        opacity: 0;
    }
    16.67% {
        opacity: 1;
    }
    33.33% {
        opacity: 0;
    }
    100% {
        opacity: 0;
    }
}

h3 {
  position: relative;

  span {
    position: absolute;
    right: 0;
    left: 0;
    opacity: 0.025;

    &#first {
      animation: pulse 15s infinite ease-in-out;
    }

    &#second {
      animation: pulse 15s infinite ease-in-out;
      animation-delay: 5s;
    }

    &#third {
      animation: pulse 15s infinite ease-in-out;
      animation-delay: 10s;
    }
  }
}