如何降低CSS动画文本转换的速度？

我创建了一个句子，中间有一组单词，它们被动画化，一个接一个地淡出过渡。但是现在这些词正在快速转换，我似乎无法调整速度

到目前为止，我已尝试更改属性：动画延迟：-8s 在所有跨度上：childs，但这不会改变 过渡。我还尝试更改属性动画： 元素10s无限线性 我不熟悉CSS3动画，我需要帮助理解：

如何减缓CSS动画过渡

我怎样才能控制速度

代码（）：

。句子{
显示：内联块；
溢出：隐藏；
高度：2米；
垂直对齐：顶部；
}
.第p{
显示：内联块；
}
.slidengvertical{
显示：内联块；
垂直对齐：文本顶部；
}
.滑动垂直跨度{
显示：块；
高度：40px；
边缘底部：-40px；
溢出：隐藏；
}
.滑动垂直跨距{
动画：元素10s无限线性；
} 
.滑动垂直跨距：第n个子项（1）{
动画延迟：-8s；
} 
.滑动垂直跨距：第n个子（2）{
动画延迟：-9秒；
} 
.滑动垂直跨距：第n个子（3）{
动画延迟：-10秒；
}
.滑动垂直跨度：第n个子项（4）{
动画延迟：-11秒；
} 
.滑动垂直跨距：第n个子（5）{
动画延迟：-12s；
}
.滑动垂直跨距：第n个子（6）{
动画延迟：-13秒；
}
.滑动垂直跨距：第n个子（7）{
动画延迟：-14秒；
}
.滑动垂直跨距：第n个子（8）{
动画延迟：-15秒；
} 
.滑动垂直跨度：第n个子项（9）{
动画延迟：-16s；
} 
.滑动垂直跨度：第n个子项（10）{
动画延迟：-17s；
}    
@关键帧元素{
0% {
不透明度：0；
最大宽度：10px；
}   
5%, 10% {
不透明度：1；
最大宽度：400px；
}  
15%, 100% {
不透明度：0；
最大宽度：10px；
}
}

珍妮是一个可爱的女孩，因为她是
太神了
美丽的
可爱的
诚实的
凉爽的
勇敢的
野生的
有趣的
地方的
性感的

而且很酷。

我想这就是你想要的结果：

。滑动垂直跨距

，具有

不透明度：0

加上

最大宽度：10px

，每个字具有从0到9的正延迟）：

正文{
背景：粉红色；
}
.判决{
显示：内联块；
溢出：隐藏；
高度：2米；
垂直对齐：顶部；
}
.第p句{
显示：内联块；
}
.垂直滑动{
显示：内联块；
垂直对齐：文本顶部；
}
.滑动垂直跨度{
显示：块；
高度：40px；
边缘底部：-40px；
溢出：隐藏；
}
.滑动垂直跨度{
动画：元素20秒无限线性；
不透明度：0；
最大宽度：10px；
}
.slidengvertical span:n子项（1）{动画延迟：0s；}.slidengvertical span:n子项（2）{动画延迟：2s；}.slidengvertical span:n子项（3）{动画延迟：4s；}.slidengvertical span:n子项（4）{动画延迟：6s；}.slidengvertical span:n子项（5）{动画延迟：8s；}.slidengvertical span:n子项（6）{动画延迟：10s；}。滑动垂直跨度：第n个子（7）{动画延迟：12s；}。滑动垂直跨度：第n个子（8）{动画延迟：14s；}。滑动垂直跨度：第n个子（9）{动画延迟：16s；}。滑动垂直跨度：第n个子（10）{动画延迟：18s；}
@为元素设置关键帧{
0% {
不透明度：0；
最大宽度：10px；
}
6%, 9% {
不透明度：1；
最大宽度：400px；
}
12%, 100% {
不透明度：0；
最大宽度：10px；
}
}

珍妮是一个可爱的女孩，因为她是
太神了
美丽的
可爱的
诚实的
凉爽的
勇敢的
野生的
有趣的
地方的
性感的
而且很酷

她当然是，但有时我希望她能放慢脚步，停止如此快的过渡。你能再放慢一点吗？如何控制速度？这里有3个改变点来控制速度：元素10秒，动画延迟：0秒；关键帧位置分别为5%、10%、15%；但它们都需要和谐相处；如果你编辑一个动画，你还需要编辑其他动画，以完成循环，而不出现任何重叠/跳跃。例如，我做了一个更新：现在动画的总时间是20，所以我也必须更新延迟值，现在它们是0,2,4,6,8,10,12,14,16,18，而不是0,1,2,3,4,5,6,7,8,9谢谢你的解释！现在我明白了是什么值改变了速度。干杯