CSS淡出动画后文本消失

Question

我正在尝试设置一个动画，其中标题首先淡入，延迟后字幕淡入。标题工作正常，但一旦字幕淡入，它就会完全消失。

它一直工作得很好，直到我在字幕中添加了延迟，现在一旦字幕消失，它就完全消失了。我找到的最好的答案是添加animtion-fill-mode: forwards;，但我已经这样做了。如何修复此问题以使文本在淡入后保持不变？

这就是我现在拥有的：

.fade-in-text-sub {
font-size: 50px;
vertical-align: middle;
color: #c1c3d9;
opacity: 0;
animation: fadeIn linear 3s;
animation-fill-mode: forwards;
-webkit-animation: fadeIn linear 3s;
-moz-animation: fadeIn linear 3s;
-o-animation: fadeIn linear 3s;
-ms-animation: fadeIn linear 3s;
animation-delay: 1s;
}
@keyframes fadeIn {
0% {opacity:0;}
100% {opacity:1;}
}
@-moz-keyframes fadeIn {
0% {opacity:0;}
100% {opacity:1;}
}
@-webkit-keyframes fadeIn {
0% {opacity:0;}
100% {opacity:1;}
}
@-o-keyframes fadeIn {
0% {opacity:0;}
100% {opacity:1;}
}
@-ms-keyframes fadeIn {
0% {opacity:0;}
100% {opacity:1;}
}

Answer 1

这是一个级联问题。声明动画被覆盖的顺序。animation-fill-mode肯定是可行的，但在此之后添加animation将把fill-mode重写回none，因为animation是一个简写键，它可以在这里包含更多的几个属性：https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Animations/Using_CSS_animations#configuring_the_animation因此可以在同一声明中包含fill-mode。

对于参考，我在子标题示例中保留了animation属性之外的animation-delay，但由于它是在之后设置的，因此不会恢复为默认值0s。

.fade-in-text {
font-size: 70px;
vertical-align: middle;
color: #c1c3d9;
opacity: 0;
-webkit-animation: fadeIn linear 3s forwards;
-moz-animation: fadeIn linear 3s forwards;
-o-animation: fadeIn linear 3s forwards;
-ms-animation: fadeIn linear 3s forwards;
animation: fadeIn linear 3s forwards;
}
.fade-in-text-sub {
font-size: 50px;
vertical-align: middle;
color: #c1c3d9;
opacity: 0;
-webkit-animation: fadeIn linear 3s forwards;
-moz-animation: fadeIn linear 3s forwards;
-o-animation: fadeIn linear 3s forwards;
-ms-animation: fadeIn linear 3s forwards;
animation: fadeIn linear 3s forwards;
animation-delay: 1s;
}
@keyframes fadeIn {
0% {opacity:0;}
100% {opacity:1;}
}
@-moz-keyframes fadeIn {
0% {opacity:0;}
100% {opacity:1;}
}
@-webkit-keyframes fadeIn {
0% {opacity:0;}
100% {opacity:1;}
}
@-o-keyframes fadeIn {
0% {opacity:0;}
100% {opacity:1;}
}
@-ms-keyframes fadeIn {
0% {opacity:0;}
100% {opacity:1;}
}

<h1 class="fade-in-text">fade-in-text</h1>
<h2 class="fade-in-text-sub">fade-in-text-sub</div>