Добавить еще один шаг в анимацию css

Question

У меня есть следующее, которое работает красиво, но это мой первый раз, когда я пытаюсь использовать анимацию 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> 

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

Я попытался это сделать первое сообщение затухать:

@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%); 
     } 
    } 

Но он просто исчезает и не выцветает.

Answer 1

Вам просто нужно указать начальное и конечное значение для любого свойства, которое вы хотите оживить. В этом случае opacity должен быть всем необходимым.

.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 */ 
 
    -moz-transform: translateX(100%); 
 
    -webkit-transform: translateX(100%); 
 
    transform: translateX(100%); 
 
    /* Apply animation to this element */ 
 
    -moz-animation: scroll-left 5s linear infinite; 
 
    -webkit-animation: scroll-left 5s linear infinite; 
 
    animation: scroll-left 5s linear infinite; 
 
} 
 

 
@keyframes scroll-left { 
 
    /* Move it left */ 
 
    0% { 
 
    transform: translateX(100%); 
 
    } 
 
    /* Stop It */ 
 
    25% { 
 
    transform: translateX(0%); 
 
    } 
 
    /* fade out */ 
 
    40% { 
 
    opacity: 1; 
 
    transform: translateX(0%); 
 
    } 
 
    100% { 
 
    opacity: 0; 
 
    transform: translateX(0%); 
 
    } 
 
}

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