Animated Rotating Text Troubleshooting

Hey friends!! 

We are trying to get the animated text scrolling effect for a client's site that has 12 words in the phrase. We are SO close, but something goes wonky after the 5th entry, and it start to overlap. Is anyone able to help us figure out what we are missing? 

LINK: https://smiley-poswolsky-golive.squarespace.com/scrolling-words-test

password: golive 

Code we are using: 

 <section class="wrapper">
    <h2 class="sentence">    
      <div class="slidingVertical">
        <span>Work.</span>
        <span>Leadership.</span>
        <span>Innovation.</span>
        <span>HR.</span>
        <span>Culture.</span>
        <span>L&D.</span>
        <span>Employee Experience.</span>
        <span>Well-Being</span>
        <span>Customer Service.</span>
        <span>Sales.</span>
        <span>Meetings.</span>
        <span>Business.</span>
      </div>
    </h2>
    </section>
 
 <style>
 /*Vertical Sliding*/
 .slidingVertical{
     display: inline;
 }
 .slidingVertical span{
     animation: topToBottom 12.5s infinite 0s;
     -ms-animation: topToBottom 12.5s infinite 0s;
     -webkit-animation: topToBottom 12.5s infinite 0s;
     color: black;
     opacity: 0;
     overflow: hidden;
     position: absolute;
 }
.slidingVertical span:nth-child(1){
     animation-delay: 0s;
     -ms-animation-delay: 0s;
     -webkit-animation-delay: 0s;
 }
 .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;
 }
    .slidingVertical span:nth-child(6){
     animation-delay: 12.5s;
     -ms-animation-delay: 12.5s;
     -webkit-animation-delay: 12.5s;
 }
   .slidingVertical span:nth-child(7){
     animation-delay: 15s;
     -ms-animation-delay: 15s;
     -webkit-animation-delay: 15s;
 }
 .slidingVertical span:nth-child(8){
     animation-delay: 17.5s;
     -ms-animation-delay: 17.5s;
     -webkit-animation-delay: 17.5s;
 }
 .slidingVertical span:nth-child(9){
     animation-delay: 20s;
     -ms-animation-delay: 20s;
     -webkit-animation-delay: 20s;
 }
 .slidingVertical span:nth-child(10){
     animation-delay: 22.5s;
     -ms-animation-delay: 22.5s;
     -webkit-animation-delay: 22.5s;
 }
    .slidingVertical span:nth-child(11){
     animation-delay: 25s;
     -ms-animation-delay: 25s;
     -webkit-animation-delay: 25s;
 }
       .slidingVertical span:nth-child(12){
     animation-delay: 27.5s;
     -ms-animation-delay: 27.5s;
     -webkit-animation-delay: 27.5s;
 }
 
 /*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>

It looks like your main amimation length is set to 12.5s but because there are 12 pieces of text with up to 27.5s of delay it is restarting the first one after 12.5s and you are getting an overlap. I would try increasing that first value to 30s and see if that's better.