My text keeps appearing when it fades out in css?-CodePudding

I have faded my text out, but when it's completely gone it appears back.

.fade-in-fade-out{
    padding-top: 5em;
    animation: fade-inout 3s alternate;
}

@keyframes fade-inout {
    0%{ opacity: 1;}
    100%{ opacity: 0;}
  }

  @-o-keyframes fade-inout{
    0%{ opacity: 1;}
    100%{ opacity: 0;}
  }
  @-moz-keyframes fade-inout{
    0%{ opacity: 1;}
    100%{ opacity: 0;}
  }
  @-webkit-keyframes fade-inout{
    0%{ opacity: 1;}
    100%{ opacity: 0;}
  }
  .fade-in-fade-out {
     -webkit-animation: fade-inout35s alternat;
     -moz-animation: fade-inout35s alternate;
     -o-animation: fade-inout35s alternate;
      animation: fade-inout35s alternat;
  }

<link rel="stylesheet" href="index.css">
<h1 >Text</h1>

To do that I followed tutorial on youtube... Thanks for help!

CodePudding user response：

It's too much animation and prefixes. Basically as we can see, it reverts to the state before animation when it's over. So start with opacity:0;

.fade-in-fade-out {
  padding-top: 2em;
  animation: fade-inout 3s;
  opacity: 0;
}

@keyframes fade-inout {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

<h1 >Text</h1>