なぜすなわち11

Question

の私のアニメーション作品は、私が持っている、以下のアニメーション（fiddle）しません：

<style style="text/css"> 

    #AdvertBox { 
     height: 55px; 
     overflow: hidden; 
     position: relative; 
     background:black; 
     color: white; 
     border: 1.75px solid yellow; 
     font-size: 35px; 
     font-style: italic; 
     border-radius: 1px; 
     width:45vw; 
    } 

    .scroll-left p 

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

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

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


    @keyframes scroll-left { 

     0% { 
     transform: translateX(100%); 
     } 
     25% { 
     opacity: 1; 
     transform: translateX(0%); 
     } 

     39% { 
     opacity: 0; 
     transform: translateX(0%); 
     } 
     100% { 
     opacity: 0; 
     transform: translateX(0%); 
     } 
    } 

    .popIn p 
    { 
     position: absolute; 
     width: 100%; 
     height: 100%; 
     margin: 0; 
     line-height: 55px; 
     text-align: center; 

     /* Starting position */ 
     transform:translateY(-100%); 

     /* Apply animation to this element */ 
     animation: popIn 10s linear infinite; 
    } 


    @keyframes popIn { 
     /* Move it left */ 
     0% { 
     transform: translateY(-100%); 
     } 
     /* Stop It */ 
     30% { 
     transform: translateY(-100%); 
     } 
     /* fade out */ 
     42% { 
     transform: translateX(0%); 
     } 
     /* fade out */ 
     70% { 
     transform: translateX(0%); 
     } 
     100% { 
     transform: translateX(-100%); 
     } 
    } 
</style> 

<div id="AdvertBox" > 

    <div class="scroll-left"> 
     <p style="position: absolute; z-index: 1 "> 
      First Message 
     </p> 
    </div> 

    <div class="popIn"> 
     <p style="position: absolute; z-index: 2 "> 
      Second, longer message to drop down 
     </p> 
    </div> 



</div> 

それが右からの内の1枚の項目のスライドを持っている必要がありますが、フェードアウト、そして一つの項目は、その上に落下します。それはクロムとfirefoxでうまく見えます、そして、左にスライドする最初のアイテムは、すなわち、動作しますが、落ちる2番目のアイテムは何もしません。

Answer 1

私はあなたのフィドルを更新しました。もう一度見てください。IE 11でも動作しますが、アニメーションを調整する必要があります。

translateXとtranslateYの代わりに、translate（x、y）を使用しました。

それは私が古いものと私は自分のバイオリンを作成したことをフォークIE 11

OKに取り組みました。あなたのpopInアニメーションが次のように変更されました。

@keyframes popIn { 
    /* Move it left */ 
    0% { 
     transform: translate(0%,-100%); 
    } 
    /* fade out */ 
    50% { 
     transform: translate(0%,0%); 
    } 
    /* fade out */ 
    75% { 
     transform: translate(0%,0%); 
    } 
    100% { 
     transform: translate(-100%,0%); 
    } 
} 

https://jsfiddle.net/qvx4b311/