仅使用css的文本淡入淡出与多个文本块

如何解决仅使用css的文本淡入淡出与多个文本块

我有3块文字。我希望块1淡入并显示3秒钟，然后淡出。一旦其不透明度达到0，我希望文本块2淡入并显示3秒钟...与文本块3相同。我想可以通过将am动画分配给所有3个不同的{{1 }}，但它们似乎最终都会统一显示：

invokeLambda

我知道可以用3个单独的动画来完成：

animation-delay

但这是1次管理/编辑的噩梦，尤其是3次（尤其是具有更复杂的关键帧）的麻烦-有更好的方法吗？

我知道可以使用JavaScript轻松完成此操作，但是我需要仅CSS的解决方案。有人可以看到我在做什么错吗？

解决方法

h2 {
  opacity: 0;
  animation-name: textFader;
  animation-duration: 18s; /* <---{ 6sec * num(H2) = 18sec } */
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
}

h2:first-of-type { animation-delay: 0s; }
h2:nth-of-type(2) { animation-delay: 6s; }
h2:last-of-type { animation-delay: 12s; }

@keyframes textFader {
  0% {
    opacity: 0;
  } /* fade-in */
  11% {
    opacity: 1;
  } /* show */
  22% {
    opacity: 1;
  } /* fade-out */
  33% { /* <-------------------{ 100% / num(H2) = 33% } */
    opacity: 0;
  } /* waiting for the finish animation of other blocks */
  100% {
    opacity: 0;
  }
}

<main>
  <h2>Text block 1</h2>
  <h2>Text block 2</h2>
  <h2>Text block 3</h2>
</main>