Text disappearing after CSS fade-in animation?-CodePudding

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;}
}

CodePudding user response：

Welcome to Stackoverflow Raylin, normally after CSS Animation is finished it will revert back to default style at this case it will revert back to .fade-in-text-sub style, so you can remove the opacity and animation delay.

This is the code that i only modified

.fade-in-text-sub {
  font-size: 50px;
  vertical-align: middle;
  color: #c1c3d9;
  opacity: 1;
  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;
}

CodePudding user response：

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 >fade-in-text</h1>
<h2 >fade-in-text-sub</div>