Text disappearing after CSS fade-in animation? - css

Question

I'm trying to set up an animation where a title fades in first and after a delay the subtitle fades in. The title is working fine, but once the subtitle fades in it disappears completely.
It was working fine until I added the delay to the subtitle and now once the subtitle fades in it disappears completely. The best answer I've found is to add animtion-fill-mode: forwards; but I've already done that. How can I fix this to have the text stay after fading in?
This is what I have right now:
.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

This is a cascading issue. The order in which you declare your animation is being overwritten.
animation-fill-mode is definitely the way to go, but adding animation after this will overwrite the fill-mode back to none, since animation is a shorthand key, which can contain several properties more here: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Animations/Using_CSS_animations#configuring_the_animation
so you can include fill-mode in the same declaration.
For reference I left in the sub title example the animation-delay outside of the animation property, but since it is set after, it is not reverted back to its default value of 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>