Html 我需要帮助结合CSS动画

我对HTML和CSS还很陌生，所以我的很多代码都不好。我需要帮助弄清楚如何组合我创建的两个动画。我想让第一个动画（目前在顶部）完全播放出来，然后在大约3秒钟后，第二个动画向左滚动缓慢，然后播放出来并保持隐藏状态

这是我的密码

正文{
字体系列：“Aldrich”，无衬线；
位置：相对位置；
线高：22px；
字号：18px；
宽度：1200px；
/*颜色：##FFFFFF；
背景：#000000*/
溢出：隐藏；
}
.文本{
字体系列：“Aldrich”，无衬线；
位置：相对位置；
线高：20px；
字号：18px；
宽度：900px；
}
.衰减效应{
位置：绝对位置；
排名：0；
底部：0；
右：0；
宽度：100%；
背景：白色；
动画：显示5s轻松；
动画填充模式：正向；
/*动画延迟：1s*/
}
.项目{
位置：绝对位置；
排名：0；
底部：0；
右：0；
宽度：100%；
背景：白色；
动画持续时间：12秒；
动画计时功能：轻松进出；
动画填充模式：正向；
}
.项目{
动画名称：anim-1；
}
@关键帧显示{
0%{宽度：100%}
100%{宽度：0%；}
}
@关键帧anim-1{
0%，50%{左：0%；不透明度：1；}
50%，90%{左：0%；不透明度：1；}
90%，100%{左：-100%；不透明度：0；}
}

打败所有的敌人！
击败所有敌人

就像另一个人说的，你应该用javascript或jQuery试试。 但是如果你只想用CSS实现它，动画延迟就可以了

这是一个类似的例子，只是给你一些理想的

div.box{
位置：相对位置；
}
第一分区{
位置：绝对位置；
左：-200px；
动画：我的第一个3s1；
动画方向：交替；
}
第二分区{
位置：绝对位置；
左：-200px；
动画：mysecond3s1；
动画延迟：3s；
动画方向：交替；
}
@关键帧myfirst{
0%{左：-200px；顶部：0px；不透明度：0；}
100%{左：200px；顶：0px；不透明度：1；}
}
@关键帧秒{
0%{左：200px；顶：0px；}
100%{左：-200px；顶：0px；}
}

打败所有的敌人！
打败所有的敌人！

我将文本放入一个

中，以使其工作正常

这是我添加的主要CSS，以使动画正常工作

空白：nowrap（这样，当div很小时，文本不会自动换行。）
溢出：隐藏（这会隐藏div之外的文本。因此，当您扩展div的宽度时，它会显示文本。）

您可以使用%s和动画持续时间进行播放，使其变快或变慢，具体取决于您要查找的内容


正文{
字体系列：“Aldrich”，无衬线；
位置：相对位置；
线高：22px；
字号：18px；
宽度：1200px；
/*颜色：##FFFFFF；
背景：#000000*/
溢出：隐藏；
}
.文本{
字体系列：“Aldrich”，无衬线；
位置：相对位置；
线高：20px；
字号：18px；
宽度：900px；
}
.项目{
位置：绝对位置；
显示：块；
排名：0；
左：0；
颜色：黑色；
空白：nowrap；
溢出：隐藏；
宽度：100%；
高度：自动；
动画：显示10秒轻松；
动画填充模式：正向；
}
@关键帧显示{
0%{宽度：0%；左侧：0%}
30%{宽度：100%；}
55%{左：0%；不透明度：1；}
100%{左：-100%；不透明度：0；}
}

打败所有的敌人

那么您想让文本在3秒内淡入淡出？我确实希望在所有文本完全显示后淡入并等待大约3秒钟，然后滚动或向左滑动并在屏幕外隐藏。您可以在第一个div后面添加第三个div和动画，只要你想让它保持静止，就让它保持静止。好的，我会尝试使用这些代码，谢谢。