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中看起来很好，并且第一个向左滑动的项目也适用，但是第二个项目，下降，没有做任何事情。

Answer 1

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

基本上不是translateX和translateY，而是使用translate（x，y）;

它适用于IE 11

好吧，我分叉那个旧的，我创造了自己的小提琴。所以你的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/

为什么我的动画不能用于11

1 个答案: