我需要动画才能结束，然后重新开始

Question

我为新闻制作了一个动画火车，类似的滑块，我需要在最后一个动画放映之前再次开始动画，此代码首先显示动画要开始结束，当结束时再次开始动画，但是我需要在4s之后再次开始， 当我使用animation-delay时，首先显示文本4秒钟，然后开始动画

这是我在Codepen中的链接

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;
}