How do I show text before an animation begins and then keep the final text visible after css animation ends?

Hello, experts. I'm a novice with CSS animations, and I'm trying to accomplish the following:

1. The first sentence is visible when a user visits my site.
2. That text vertically slides and the second sentence slides into place.
3. Then that sentence slides away and the third and final sentence slides in and remains on the screen.

I can get the three items to animate just fine (see what I've got here: https://www.erincorradi.com/welcome); I just can't get the first sentence visible right away before the animation begins and the final sentence to remain after the animation ends. Thanks for your help!

I've inserted this in a code block into my Brine Family template:

    <div class="slidingVertical">
     <h1>

 <span>Welcome too the start of you’re new website, freind.</span>
     <span>Welcome to<font color="bf7d65"><s>o</s></font> the start of you<font color="bf7d65"><s>’re</s></font> new website, fr<font color="bf7d65"><s>ei</s></font>nd.</span>
<span><font color="bf7d65">Now for real: </font>Welcome to the start of your new website, friend.</span>
   </div>
 </h1>

Here's the css:

/*Vertical Sliding*/
.slidingVertical{
   display: inline;
   text-indent: 0px;
}
.slidingVertical span{
   animation: topToBottom 14.5s linear 1 0s;
   -ms-animation: topToBottom 14.5s linear 1 0s;
   -webkit-animation: topToBottom 14.5s linear 1 0s;
 animation-iteration-count: 1;
    -ms-animation-iteration-count: 1;
-webkit-animation-iteration-count: 1;
   opacity: 0;
   overflow: visible;
   position: absolute;

}
.slidingVertical span:nth-child(2){
   animation-delay: 3.5s;
   -ms-animation-delay: 3.5s;
   -webkit-animation-delay: 3.5s;
 animation-iteration-count: 1;
    -ms-animation-iteration-count: 1;
-webkit-animation-iteration-count: 1;
}

.slidingVertical span:nth-child(3){
animation-delay: 7s;
   -ms-animation-delay: 7s;
   -webkit-animation-delay: 7s;
 animation-iteration-count: 1;
  -ms-animation-iteration-count: 1;
  -webkit-animation-iteration-count: 1;
 animation-fill-mode: forwards !important;
   -ms-animation-fill-mode: forwards !important;
   -webkit-animation-fill-mode: forwards !important ;
}

/*topToBottom Animation*/
@-moz-keyframes topToBottom{
   0% { opacity: 0; }
   5% { opacity: 1; -moz-transform: translateY(-50px); }
   10% { opacity: 1; -moz-transform: translateY(0px); }
   25% { opacity: 1; -moz-transform: translateY(0px); }
   30% { opacity: 0; -moz-transform: translateY(50px); }
   80% { opacity: 0; }
   100% { opacity: 0; }
}
@-webkit-keyframes topToBottom{
   0% { opacity: 0; }
   5% { opacity: 0; -webkit-transform: translateY(-50px); }
   10% { opacity: 1; -webkit-transform: translateY(0px); }
   25% { opacity: 1; -webkit-transform: translateY(0px); }
   30% { opacity: 0; -webkit-transform: translateY(50px); }
   80% { opacity: 0; }
   100% { opacity: 0; }
}
@-ms-keyframes topToBottom{
   0% { opacity: 0; }
   5% { opacity: 0; -ms-transform: translateY(-50px); }
   10% { opacity: 1; -ms-transform: translateY(0px); }
   25% { opacity: 1; -ms-transform: translateY(0px); }
   30% { opacity: 0; -ms-transform: translateY(50px); }
   80% { opacity: 0; }
   100% { opacity: 0; }
}