向CSS动画添加另一步

我有以下内容，效果很好，但这是我第一次尝试CSS动画。如何在动画中添加另一个步骤？我想做的是让一条消息淡出或消失，然后弹出两条消息然后滚动出去，以便形成一个不错的循环。

<style style="text/css">

    .scroll-left {
         height: 50px;  
         overflow: hidden;
         position: relative;
         background:black;
         color: white;
         border: 1px solid white;
         font-size: 32px;
         font-style: italic; 
    }

    .scroll-left p 

     {
         position: absolute;
         width: 100%;
         height: 100%;
         margin: 0;
         line-height: 50px;
         text-align: center;

         /* Starting position */
         transform:translateX(100%);

         /* Apply animation to this element */  
         animation: scroll-left 8s linear infinite;
    }

    @keyframes scroll-left {
        0%   
        { 
             -moz-transform: translateX(100%); /* Browser bug fix */
             -webkit-transform: translateX(100%); /* Browser bug fix */
             transform: translateX(100%);       
         }

         100% 
        { 
         -moz-transform: translateX(2%); /* Browser bug fix */
         -webkit-transform: translateX(2%); /* Browser bug fix */
         transform: translateX(2%); 
        }
    }
</style>

<div class="scroll-left">
    <p>
        <span style="color:#841214">Message One</span>  
        <!-- Message Two -->
    </p>
</div>

我意识到我需要在不同的关键帧％s上使用不同的步骤，但是我不确定当要在同一区域中为多个项目设置动画时它如何工作。

我试图这样做，以使第一条消息消失：

@keyframes scroll-left 
    {
        /* Move it left */
        0%   
        { 
             transform: translateX(100%);       
         }

        /* Stop It */
        25% 
        { 
            transform: translateX(0%); 
             opacity:100;
        }

        /* fade out */
        40% 
        { 
             visibility: hidden;
             opacity:0;
             transition: visibility 0s 2s, opacity 2s linear;
             transform: translateX(0%); 
        }

        100%
        {
            visibility: hidden;
            opacity:0;
            transition: visibility 0s 2s, opacity 2s linear;
            transform: translateX(0%); 
        }
    }

但是它只是消失而不会消失。