html - 为什么我的动画在 ie 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>

它应该有一个元素从右边滑入，淡出，然后一个元素落在上面。它在 chrome 和 firefox 中看起来不错，向左滑动的第一个元素在 ie 中有效，但第二个元素，下拉，没有做任何事情。

Answer 1

我已经更新了你的 fiddle ，请再看一遍，它适用于 IE 11，但你可能需要调整动画。

基本上我使用的不是 translateX 和 translateY，而是 translate(x,y);

它适用于 IE 11

好吧，我 fork 了那个旧的，然后我创建了自己的 fiddle 。所以您的 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/