Html 如何在CSS中无限重复动画的迭代之间添加延迟

我有一个

填充了淡入和退出的

元素。最后一个出现后，它停留的时间太长，在第二次迭代中与第一个发生碰撞。在任何情况下，文本都不应相互重叠/混合。将其设置为15秒会导致文本在转换过程中互相渗透

我能做些什么来让它们都顺畅地流动呢

.wrapper{
宽度：377px；
保证金：自动；
}
跨度{
宽度：300px；
位置：绝对位置；
左：计算（50%-121px）；
字体大小：24px；
线高：26.4px；
文本对齐：居中；
颜色：红色；
不透明度：0；
溢出：隐藏；
动画：fadeEffect 12s线性无限0s；
}
跨度：第n个孩子（2）{
动画延迟：3s；
}
跨度：第n个孩子（3）{
动画延迟：6秒；
}
跨度：第n个孩子（4）{
动画延迟：9秒；
}
跨度：第n个孩子（5）{
动画延迟：12秒；
}
@关键帧淡出效果{
0% {
不透明度：0；
}
5% {
不透明度：0；
变换：translateY（0px）；
}
10% {
不透明度：1；
变换：translateY（0px）；
}
25% {
不透明度：1；
变换：translateY（0px）；
}
30% {
不透明度：0；
变换：translateY（0px）；
}
80% {
不透明度：0；
}
100% {
不透明度：0；
}
}

敏捷的棕色狐狸
跳过懒狗
在去市场的路上
吃点东西
为了他的好朋友

只需增加动画长度，使其在最后一个动画结束之前不会从开头开始

  animation: fadeEffect 15s linear infinite 0s;

---

对不起，我应该澄清一下，文本在任何时候都不应该相互重叠/混合。把它设为15秒会导致文本在转换时互相流血。啊，我明白了。问题是第一个跨距没有延迟，所以当它返回时，它会立即开始。您是否需要第一个跨度立即可见，还是可以将动画也应用于该跨度？最好是立即可见。。有解决办法吗？你对当前的淡入淡出动画有多严格？您可以将其设置为15秒，并稍微调整动画，使其不会重叠everTweak，因为不使用淡入淡出？