Why doesn't my animation work in ie 11

Question

I have the following animation (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>

It should have one item slide in from the right, fade out, then one item drop down on it. It looks fine in chrome and firefox, and the first item that slides left works in ie, but the second item, dropping down, doesn't do anything.

Answer 1

i have updated your fiddle please have a look again, it works on IE 11, but you may need to tweak the animation.

basically instead of translateX and translateY, i used translate(x,y);

it worked on IE 11

ok i forked that old one and i created my own fiddle. so your popIn animation has been changed to the following.

@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/