мне нужно, чтобы моя анимация, прежде чем закончить, начать снова (Marquee)

Question

я делаю анимацию поезда для новостей, аналогичный ползунок, мне нужно, чтобы анимация начала последнего анимационного шоу, снова начиналась анимация, этот код сначала показывал начало и конец, но мне нужно после повторного запуска 4s, когда я использую анимацию с задержкой, сначала показываю текст в течение 4 секунд и после запуска анимации

вот моя ссылка в коде

https://codepen.io/soodeh/pen/RmEgmp

<div class="containerb" id="listone">
    <ul>
       <li class="train" id="one">
           aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
       </li>
       <li class="train" >
           bbbbbbbbbbbbbbbbbbbbb
       </li>
       <li class="train" id="three">
           bccccccccccccccccccccccccccccccccccccccccc
       </li>
       <li class="train" >
           dddddddddddddddddddddd
       </li>
   </ul>    
</div>

// css styles     
.containerb {
    padding-top: 100px;
    width: 100%;
    overflow: hidden;
}    
.containerb .train {
    /*width: 100px;*/
    height: 20px;
    margin: 0 auto;
    position: relative;
    animation: train 30s infinite linear ;
    -webkit-animation: train 30s infinite linear;
    display: table-cell;
    text-align: right;
}
#one{
    background: yellow;
}
#two {
    background: blue;
}
#three {
    background: green;
}
#four {
    background: red;
}

@keyframes train {
    0% {
        left: 100%;
    }    
    50% {
        left:0%;
    }    
    100% {
        left: -100%;
    }
}
@-webkit-keyframes train {
    0% {
        left: 100%;
    }    
    50% {
        left: 0%;
    }    
    100% {
        left: -100%;
    }
}
.containerb   ul{
    width: max-content;
}