了解为什么关键帧动画似乎不遵循％间隔

Question

免责声明：React示例，但从非反应性背景的角度来看非常容易理解。

https://codesandbox.io/s/infallible-heyrovsky-2g48q

我正在尝试制作淡入/淡出动画，该动画将在字符串数组中循环。这是我正在处理的codesandbox示例。可以清楚地看到我正在尝试解决的当前错误。

据我了解，关键帧的工作方式是按特定的时间间隔（即当前动画播放方式的百分比）应用指定的样式。

这是一个对我毫无意义的例子。如果在30％时我们的不透明度为0，在80％时我们的不透明度为0，而在100％时我们的不透明度是...那么为什么我们需要指定80％？为什么还要指定100％，因为它会再次循环回到0％？

keyframe {
  0% {
    opacity: 0;
  }
    5% {
    opacity: 0;
  }
    10% {
    opacity: 1;
  }
    25% {
    opacity: 1;
  }
    30% {
    opacity: 0;
  }
    80% {
    opacity: 0;
  }
    100% {
    opacity: 0;
  }
}

这只是我要理解的一部分，而更多是我链接的沙盒的全部内容。

我不明白为什么文本字符串会彼此重叠，因为animation duration is 21s，第n个子级延迟依次增加了3s，并且words array中有7个元素。