Текст исчезает после анимации CSS? ⇐ CSS

[Гость]

Я пытаюсь настроить анимацию, в которой заголовок исчезает в первую очередь, и после задержки подзаголовок исчезает. Название работает нормально, но как только подзаголовок исчезает в нем полностью. Лучший ответ, который я обнаружил,-добавить режим заполнения анимации: 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;}
}


Подробнее здесь: https://stackoverflow.com/questions/716 ... -animation