Looking to slow animation down?

Hello! I'm using this code I found on an older forum. I'm hoping to slow the animation down, but I can't get it to flow one at a time. Any suggestions for the timing?

 <section class="wrapper">
    <h1 class="sentence">We are 
      <div class="slidingVertical">
        <span>Translators.</span>
        <span>Copywriters.</span>
        <span>Editors-at-large.</span>
        <span>Technologists.</span>
        <span><b>LOGOS.</b></span>
      </div>
    </h1>
    </section>
 
 <style>
 /*Body*/
 body{
     background-color: #222;
     font-family: 'Montserrat', sans-serif;
 }
 /*Heading1*/
 h1{
     color: #222;
     font-size: 60px;
     margin-top: 40px;
     text-align: left;
 }
 /*Sentence*/
 .sentence{
      color: #222;
      font-size: 80px;
      text-align: left;
 }
 /*Wrapper*/
 .wrapper{
     background-color: ;
     font-family: 'Montserrat', sans-serif;
     margin: 100px auto;
     padding: 40px 40px;
     position: relative;
     width: 70%;
 }
 
 /*Vertical Sliding*/
 .slidingVertical{
     display: inline;
     text-indent: 12px;
 }
 .slidingVertical span{
     animation: topToBottom 12.5s linear infinite 0s;
     -ms-animation: topToBottom 12.5s linear infinite 0s;
     -webkit-animation: topToBottom 12.5s linear infinite 0s;
     color: #FFC300;
     opacity: 0;
     overflow: hidden;
     position: absolute;
 }
 .slidingVertical span:nth-child(2){
     animation-delay: 2.5s;
     -ms-animation-delay: 2.5s;
     -webkit-animation-delay: 2.5s;
 }
 .slidingVertical span:nth-child(3){
     animation-delay: 5s;
     -ms-animation-delay: 5s;
     -webkit-animation-delay: 5s;
 }
 .slidingVertical span:nth-child(4){
     animation-delay: 7.5s;
     -ms-animation-delay: 7.5s;
     -webkit-animation-delay: 7.5s;
 }
 .slidingVertical span:nth-child(5){
     animation-delay: 10s;
     -ms-animation-delay: 10s;
     -webkit-animation-delay: 10s;
 }
 
 /*topToBottom Animation*/
 @-moz-keyframes topToBottom{
     0% { opacity: 0; }
     5% { opacity: 0; -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; }
 }
 </style>

1 hour ago, aimawaymessage said:

Hello! I'm using this code I found on an older forum. I'm hoping to slow the animation down, but I can't get it to flow one at a time. Any suggestions for the timing?

 

 <section class="wrapper">
    <h1 class="sentence">We are 
      <div class="slidingVertical">
        <span>Translators.</span>
        <span>Copywriters.</span>
        <span>Editors-at-large.</span>
        <span>Technologists.</span>
        <span><b>LOGOS.</b></span>
      </div>
    </h1>
    </section>
 
 <style>
 /*Body*/
 body{
     background-color: #222;
     font-family: 'Montserrat', sans-serif;
 }
 /*Heading1*/
 h1{
     color: #222;
     font-size: 60px;
     margin-top: 40px;
     text-align: left;
 }
 /*Sentence*/
 .sentence{
      color: #222;
      font-size: 80px;
      text-align: left;
 }
 /*Wrapper*/
 .wrapper{
     background-color: ;
     font-family: 'Montserrat', sans-serif;
     margin: 100px auto;
     padding: 40px 40px;
     position: relative;
     width: 70%;
 }
 
 /*Vertical Sliding*/
 .slidingVertical{
     display: inline;
     text-indent: 12px;
 }
 .slidingVertical span{
     animation: topToBottom 12.5s linear infinite 0s;
     -ms-animation: topToBottom 12.5s linear infinite 0s;
     -webkit-animation: topToBottom 12.5s linear infinite 0s;
     color: #FFC300;
     opacity: 0;
     overflow: hidden;
     position: absolute;
 }
 .slidingVertical span:nth-child(2){
     animation-delay: 2.5s;
     -ms-animation-delay: 2.5s;
     -webkit-animation-delay: 2.5s;
 }
 .slidingVertical span:nth-child(3){
     animation-delay: 5s;
     -ms-animation-delay: 5s;
     -webkit-animation-delay: 5s;
 }
 .slidingVertical span:nth-child(4){
     animation-delay: 7.5s;
     -ms-animation-delay: 7.5s;
     -webkit-animation-delay: 7.5s;
 }
 .slidingVertical span:nth-child(5){
     animation-delay: 10s;
     -ms-animation-delay: 10s;
     -webkit-animation-delay: 10s;
 }
 
 /*topToBottom Animation*/
 @-moz-keyframes topToBottom{
     0% { opacity: 0; }
     5% { opacity: 0; -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; }
 }
 </style>

 

Could you show the current implemetation page?