多个文本 CSS 动画不会在指定时间启动

Question

我正在创建一个带有css文本动画的登录页面。
我想让几行文本一个接一个地出现。
每段文本应呈现 2 秒，并在前一行文本不再呈现后开始。
我遇到的问题是，
文本呈现为不透明，然后进入动画开始时间和持续时间。
我希望动画在页面加载时，
而不是渲染(左侧或顶部：-300px(，
并在第一个动画停止后渲染。

我尝试了各种属性，例如动画延迟和持续时间以及易用性，但无济于事。

.header-animate-wg {
position           : relative;
animation          : header-animate-wg 2s;
animation-fill-mode: forwards;
}
@keyframes header-animate-wg {
0%   { opacity: 0;   top: -300px;}
50%  { opacity: 1;   top: 0;}
75%  { opacity: 1;   top: 0;}
90%  { opacity: 0.2; top: 0;}
100% { opacity: 0; }
}
.header-animate-im {
position           : relative;
animation          : header-animate-im;
animation-duration : 2s;
animation-fill-mode: forwards;
}
@keyframes header-animate-im {
0%   { opacity: 0; left: -300px; }
90%  { opacity: 1; }
100% { opacity: 0; }     
}
.header-animate-me {
position           : relative;
animation          : header-animate-me 2s;
animation-fill-mode: forwards;
}
@keyframes header-animate-me {
0%   { opacity: 0; left: -300px; }
90%  { opacity: 1; }
100% { opacity: 0; }
}

<div class="header-animate-wg">
<h1> What's good!</h1>
</div>
<div class="header-animate-im">
<h1> I'm </h1>
</div>
<div class="header-animate-me">
<h1> Name </h1>
</div>

Answer 1

拆分动画以进入动画，并离开动画。现在您可以使用animation-delay(第 4 个参数，在forwards或both之后(来计划动画：

.header-animate-wg {
position: relative;
animation: header-animate-enter-top 1s forwards, 
header-animate-leave-fade 1s forwards 3s;
}
.header-animate {
position: relative;
}
.header-animate-im {
animation: header-animate-enter-left 1s both 1s,
header-animate-leave-fade 1s forwards 4s;
}
.header-animate-me {
animation: header-animate-enter-left 1s both 2s,
header-animate-leave-fade 1s forwards 5s;
}
@keyframes header-animate-enter-top {
from { top: -100px; opacity: 0 }
to { top: 0; opacity: 1; }
}
@keyframes header-animate-enter-left {
from { left: -100px; opacity: 0; }
to { left: 0; opacity: 1; }
}
@keyframes header-animate-leave-fade {
from { opacity: 1; }
to { opacity: 0; }
}
}

<div class="header-animate-wg">
<h1> What's good!</h1>
</div>
<div class="header-animate header-animate-im">
<h1> I'm </h1>
</div>
<div class="header-animate header-animate-me">
<h1> Name </h1>
</div>