Html 多元素动画延迟-css

我有一个字母“Z”的svg，我正试图使它作为我的网站的加载程序，我正试图动画它，“Z”有3行，顶部，中间和底部。我希望它们一个接一个地出现，就像加载程序启动时，从左侧显示“Z”的顶行，然后显示中间行，然后是底线。我正在尝试制作动画，但如果我为无限制作动画，那么效果就不好，我也尝试过

动画延迟

，但对我不起作用。
这是我的密码：

/*样板文件-跳过它*/
*{box size:border box}html{box size:border box；font size:16px；}*，*：before，*：after{box size:inherit；}body，h1，h2，h3，h4，h5，h6，p，ol，ul{margin:0；padding:0；字体权重：normal；}ol，ul{list style:none；}img{max-width:100%；height:auto；}body{height:100vh；display:flex；align items:center}
/*下面是实际代码*/
兹洛戈先生{
保证金：0自动；
宽度：80px；
高度：80px；
填充：12px 18px；
}
topBar先生，
.底线{
剪辑路径：插入（0px 0px 0px 0px）；
动画：topBar 2s无限；
}
米德尔巴先生{
剪辑路径：插入（0px 0px 60px 0px）；
动画：middleBar 2s无限；
动画延迟：1s；
}
.底线{
剪辑路径：插入（0px 0px 0px 0px）；
动画：底部的2s无限；
动画延迟：2s；
}
@关键帧顶栏{
0%   {
剪辑路径：插入（0px 26px 0px 0px）；
}
50%  {
剪辑路径：插入（0px 0px 0px 0px）；
}
100% {
剪辑路径：插入（0px 26px 0px 0px）；
}
}
@关键帧中间栏{
0%   {
剪辑路径：插入（0px 0px 0px 0px）；
}
50%  {
剪辑路径：插入（0px 0px 60px 0px）；
}
100% {
剪辑路径：插入（0px 0px 0px 0px）；
}
}
@关键帧底部栏{
0%   {
剪辑路径：插入（0px 26px 0px 0px）；
}
50%  {
剪辑路径：插入（0px 0px 0px 0px）；
}
100% {
剪辑路径：插入（0px 26px 0px 0px）；
}
}

---

可以在关键帧中描述动画的计时：

/*样板文件-跳过它*/
*{box size:border box}html{box size:border box；font size:16px；}*，*：before，*：after{box size:inherit；}body，h1，h2，h3，h4，h5，h6，p，ol，ul{margin:0；padding:0；字体权重：normal；}ol，ul{list style:none；}img{max-width:100%；height:auto；}body{height:100vh；display:flex；align items:center}
/*下面是实际代码*/
兹洛戈先生{
保证金：0自动；
宽度：80px；
高度：80px；
填充：12px 18px；
}
topBar先生，
.底线{
剪辑路径：插入（0px 0px 0px 0px）；
动画：topBar 2s无限；
}
米德尔巴先生{
剪辑路径：插入（0px 0px 60px 0px）；
动画：middleBar 2s无限；
}
.底线{
剪辑路径：插入（0px 26px 0px 0px）；
动画：底部的2s无限；
}
@关键帧顶栏{
0% {
剪辑路径：插入（0px 26px 0px 0px）；
}
17% {
剪辑路径：插入（0px 0px 0px 0px）；
}
83% {
剪辑路径：插入（0px 0px 0px 0px）；
}
100% {
剪辑路径：插入（0px 26px 0px 0px）；
}
}
@关键帧中间栏{
17% {
剪辑路径：插入（0px 0px 60px 0px）；
}
33% {
剪辑路径：插入（0px 0px 0px 0px）；
}
67% {
剪辑路径：插入（0px 0px 0px 0px）；
}
83% {
剪辑路径：插入（0px 0px 60px 0px）；
}
}
@关键帧底部栏{
33% {
剪辑路径：插入（0px 26px 0px 0px）；
}
50% {
剪辑路径：插入（0px 0px 0px 0px）；
}
67% {
剪辑路径：插入（0px 26px 0px 0px）；
}
}

---

很好，谢谢兄弟，但动画结束后，它会像反向一样返回。它不应该倒转，它应该隐藏起来，然后再次启动animation@ZainShabir不客气：）这就是问题中的动画，所以我认为这是有意的（就像加载动画）。通过移除50%之后的关键帧，而不是将不透明度设置为0乘以100%，可以实现您所说的。