My text keeps appearing when it fades out in css?

Question

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 class="fade-in-fade-out">Text</h1>

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

Answer 1

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 class="fade-in-fade-out">Text</h1>