CSS Animation - hide the text until the page loads-CodePudding

I have the css animation working but the problem is when the page loads the text is visible and then it animates. I want it so that the text isn't visible until it animates onto the screen. My example is here, any help would be appreciated.

.text-reveal {
  margin: 0;
  text-align: center;
  font-size: 200px;
  overflow: hidden;
  line-height: 1;
}
    .oneReveal {
      display: block;
      animation: reveal 1.5s cubic-bezier(0.77, 0, 0.175, 1) 0.5s;
       }
    .twoReveal {
      display: block;
      animation: reveal 1.5s cubic-bezier(0.77, 0, 0.175, 1) 1.2s;
        }
    .threeReveal {
      display: block;
      animation: reveal 1.5s cubic-bezier(0.77, 0, 0.175, 1) 1.5s;

      }


@keyframes "reveal" {
  0% {
    transform: translate(0,100%);
    visibility: hidden;
    opacity: 0;
  }
  100% {
    transform: translate(0,0);
    visibility: visible;
    opacity: 1;
  }
}

    <div >
        <h1 >
            <span >reveal</span>
                    
        </h1>
                 <h1 >
            <span >reveal</span>
                    
        </h1>
                
                 <h1 >
            <span >reveal</span>
                    
        </h1>
    </div>

CodePudding user response：

You can keep the % and just add the "forwards" and the visibility hidden.

    .text-reveal {
    margin: 0;
    text-align: center;
    font-size: 200px;
    overflow: hidden;
    line-height: 1;
}

.oneReveal {
    display: block;
    visibility: hidden;
    animation: reveal 1.5s cubic-bezier(0.77, 0, 0.175, 1) 0.5s forwards;
}

.twoReveal {
    display: block;
    visibility: hidden;
    animation: reveal 1.5s cubic-bezier(0.77, 0, 0.175, 1) 1.2s forwards;
}

.threeReveal {
    display: block;
    visibility: hidden;
    animation: reveal 1.5s cubic-bezier(0.77, 0, 0.175, 1) 1.5s forwards;
}


@keyframes reveal {
    from {
    transform: translate(0,100%);
    opacity: 0;}

    to {
        transform: translate(0,0);
        visibility: visible;
        opacity: 1;
    }
}`enter code here`

    <div >
        <h1 >
            <span >reveal</span>
                    
        </h1>
                 <h1 >
            <span >reveal</span>
                    
        </h1>
                
                 <h1 >
            <span >reveal</span>
                    
        </h1>
    </div>