How can i animate my words from bottom to top infinitely in CSS

Question

How do I make the 2 sentences loop from bottom to top continuously? & also, how can fade the words when it goes up? As of now, there is a pause before the animation starts again and I want it to iterate between the 2 sentences within the pink background, thanks for the help

.btn-link_1, .btn-link_2  {
    text-decoration: none; 
  }
  #slideset {
    background-color: #FFD4C2;
    box-sizing: content-box;
    height: 50px;
    text-align: center;
    max-width: 100%; 
    margin: auto; 
    justify-content: center; 
    display: flex;
    }
  
   .phrases span {
    display:block;
    padding-top: 10px;
    animation: spin_words 10s infinite;
    animation-delay: 0s;
  }
  
  .phrases {
  overflow: hidden; 
  }
  
  
  @keyframes spin_words {
    0%, 10% {
    transform: translateY(0%);
  }
  
  15%, 35% {
    transform: translateY(-100%);
  }
  
  40%, 60% { 
    transform: translateY(-200%);
  }
  
  65%, 85% {
    transform: translateY(-300%);
  }
  
  90%, 100% {
    transform: translateY(-400%);
  }
 } 

<div id=slideset>
    <div class="phrases">

      <span style="color: #414042; font-size: 14px; margin: auto;">
        This is the first sentence
      </span>
      <span style="color: #414042; font-size: 14px; margin: auto;"> 
            This is the second sentence
        </span>
     
    </div> 
  </div>