Html CSS动画完成后显示文本

我不认为我发了两次邮件，但如果我发了，对不起

我的CSS代码有问题： 我希望在第一个动画完成时显示第二个文本

因此，它将类似于：

第一个动画开始，第二个文本隐藏，然后第一个动画完成，然后第二个文本显示。 我认为问题来自闪烁的动画（第二个文本动画）

以下是我的HTML代码：

*{
填充：0；
保证金：0；
字体系列：无衬线；
}
身体{
背景：白色；
}
.集装箱{
文本对齐：居中；
位置：绝对位置；
最高：50%；
左：50%；
转换：翻译（-50%，-50%）；
宽度：100%；
}
.货柜跨度{
文本转换：大写；
显示：块；
}
.第一段文字{
颜色：白色；
字体大小：60px；
字号：700；
字母间距：8px；
边缘底部：20px；
背景：黑色；
位置：相对位置；
动画：首先是文字动画3s1；
}
/*第二个文本应显示在
第一个动画结束*/
.第二段文字{
字体大小：30px；
颜色：深色；
显示：块；
动画：第二个文本动画1s 3s线性无限；
}
@第一个关键帧\u文本\u动画{
0% {
颜色：黑色；
边缘底部：-40px；
}
30% {
字母间距：25px；
边缘底部：-40px；
}
85% {
字母间距：8px；
边缘底部：-40px；
}
}
@关键帧第二个文本动画{
50% {
不透明度：0；
}
}

动画文本
第一部动画
第二个动画，应显示在末尾

您的

动画延迟可以工作，但您还需要设置

另外，将第二个标题的
50%
更改为
from
，因此它将其初始状态设置为
opacity:0

最后一件事：要启用闪烁动画，请在速记中添加
alternate

这是最终结果：


*{
填充：0；
保证金：0；
字体系列：无衬线；
}
身体{
背景：白色；
}
.集装箱{
文本对齐：居中；
位置：绝对位置；
最高：50%；
左：50%；
转换：翻译（-50%，-50%）；
宽度：100%；
}
.货柜跨度{
文本转换：大写；
显示：块；
}
.第一段文字{
颜色：白色；
字体大小：60px；
字号：700；
字母间距：8px；
边缘底部：20px；
背景：黑色；
位置：相对位置；
动画：首先是文字动画3s1；
}
/*第二个文本应显示在第一个动画的末尾*/
.第二段文字{
字体大小：30px；
颜色：深色；
显示：块；
动画：第二个文本动画，线性无限交替；
}
@第一个关键帧\u文本\u动画{
0%{
颜色：黑色；
边缘底部：-40px；
}
30%{
字母间距：25px；
边缘底部：-40px；
}
85%{
字母间距：8px；
边缘底部：-40px；
}
}
@关键帧第二个文本动画{
从{
不透明度：0；
}
}

>第一部动画
>第二个动画，应显示在末尾
您的
动画延迟可以工作，但您还需要设置

另外，将第二个标题的
50%
更改为
from
，因此它将其初始状态设置为
opacity:0

最后一件事：要启用闪烁动画，请在速记中添加
alternate

这是最终结果：


*{
填充：0；
保证金：0；
字体系列：无衬线；
}
身体{
背景：白色；
}
.集装箱{
文本对齐：居中；
位置：绝对位置；
最高：50%；
左：50%；
转换：翻译（-50%，-50%）；
宽度：100%；
}
.货柜跨度{
文本转换：大写；
显示：块；
}
.第一段文字{
颜色：白色；
字体大小：60px；
字号：700；
字母间距：8px；
边缘底部：20px；
背景：黑色；
位置：相对位置；
动画：首先是文字动画3s1；
}
/*第二个文本应显示在第一个动画的末尾*/
.第二段文字{
字体大小：30px；
颜色：深色；
显示：块；
动画：第二个文本动画，线性无限交替；
}
@第一个关键帧\u文本\u动画{
0%{
颜色：黑色；
边缘底部：-40px；
}
30%{
字母间距：25px；
边缘底部：-40px；
}
85%{
字母间距：8px；
边缘底部：-40px；
}
}
@关键帧第二个文本动画{
从{
不透明度：0；
}
}

>第一部动画
>第二个动画，应显示在末尾
您可以使用
动画延迟
。
这里是每3秒迭代第二个文本的代码

此外，此值顺序不正确：

animation:second_text_anim 1s 3s linear infinite;

在动画短片方法中，必须对值进行排序，如下例所示：

div {
  animation-name: example;
  animation-duration: 5s;
  animation-timing-function: linear;
  animation-delay: 2s;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}

div {
  animation: example 5s linear 2s infinite alternate;
}

因此，在您的代码中，您必须像这样使用它：

animation:second_text_anim 3s linear 4s infinite;


*{
填充：0；
保证金：0；
字体系列：无衬线；
}
身体{
背景：白色；
}
.集装箱{
文本对齐：居中；
位置：绝对位置；
最高：50%；
左：50%；
转换：翻译（-50%，-50%）；
宽度：100%；
}
.集装箱{
文本转换：大写；
}
.第一段文字{
颜色：白色；
字体大小：60px；
字号：700；
字母间距：8px；
边缘底部：20px；
背景：黑色；
位置：相对位置；
动画：首先是文字动画3s1；
}
/*第二个文本应显示在第一个动画的末尾*/
.第二段文字{
字体大小：30px；
颜色：深色；
显示：块；
不透明度：0；
动画：第二个文本动画3s线性4s无限；
}
@第一个关键帧\u文本\u动画{
0%{
颜色：黑色；
边缘底部：-40px；
}
30%{
字母间距：25px；
边缘底部：-40px；
}
85%{
字母间距：8px；
边缘底部：-40px；
}
}
@关键帧第二个文本动画{
50% {
不透明度：1；
}
}

动画文本
>第一部动画
>第二个动画，应显示在末尾<
您可以使用
动画延迟
。
这里是每3秒迭代第二个文本的代码

此外，此值顺序不正确：

animation:second_text_anim 1s 3s linear infinite;

在动画短片方法中，必须对值进行排序，如本例所示