アニメーションに別のステップを追加してください。

Question

私は次のようにうまくいきますが、これは初めてのCSSアニメーションです。アニメーションに別のステップを追加するにはどうすればよいですか？私がしたいのは、メッセージが消えたり消えたりしてメッセージが2回ポップインしてスクロールアウトしていいループになるということです。

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

しかし、それはただ消え、フェードしません。

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>