css - 动画不适用于 jquery 移动容器中 iphone 上的 Safari

Question

我有一个 css 动画，可以在 jsfiddle 中的 iphone 的 safari 中使用。 ，但是如果我尝试在 standalone webpage 上运行它没有别的东西，它无法运行第二个动画。奇怪的是， fiddle 也没有显示黑色背景和黄色边框。是什么原因造成的？

<style style="text/css">

    #AdvertBox {
         height: 50px;  
         overflow: hidden;
         position: relative;
         background:black;
         color: white;
         border: 1.75px solid yellow;
         font-size: 1.3em;
         border-radius: 1px;
         width:99%;
         text-align: center;
    }

    .scroll-left p 

     {
         position: absolute;
         width: 100%;
         height: 100%;
         margin: 0;
         margin-left:auto;
         margin-right:auto;
         line-height: 50px;
         text-align: center;

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

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

    .popIn p 
     {
         position: absolute;
         width: 100%;
         height: 100%;
         margin: 0;
         margin-left:auto;
         margin-right:auto;
         line-height: 50px;
         text-align: center;
         white-space: nowrap;

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

         /* Apply animation to this element */  
         animation: popIn 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%);
      }
    }

    @keyframes popIn {
        0% {
            transform: translate(0%,-100px);
        }

      30% {
        transform: translate(0%,-100px);
      }
      42% {
        transform: translate(0%,0%);
      }
      70% {
        transform: translate(0%,0%);
      }
      100% {
        transform: translate(-100%,0%);
      }

    }
</style>

<div id="AdvertBox" > 

    <div class="scroll-left">
        <p style="position: absolute; z-index: 1 ">
            Is your <span style="color:#FF0007">Tax Refund</span> delayed? 
        </p>
    </div>

    <div class="popIn">
        <p style="position: absolute; z-index: 2 ">
            <span style="color:#0A00FF; font-weight:bold;">DRIVE YOUR WAY</span> Today for $0 DOWN! 
        </p>
    </div>



</div>

根据 Milo 的建议，我将其更改为

    <style style="text/css">

    #AdvertBox {
         height: 50px;  
         overflow: hidden;
         position: relative;
         background:black;
         color: white;
         border: 1.75px solid yellow;
         font-size: 1.3em;
         border-radius: 1px;
         width:99%;
         text-align: center;
    }

    .scroll-left p 

     {
         position: absolute;
         width: 100%;
         height: 100%;
         margin: 0;
         margin-left:auto;
         margin-right:auto;
         line-height: 50px;
         text-align: center;

         /* Starting position */
         -moz-transform:translateX(100%);  /* Firefox */
         -webkit-transform:translateX(100%);  /* Chrome, Safari, Opera */
         -ms-transform: translateX(100%) /* IE 9 */
         transform:translateX(100%);

         /* Apply animation to this element */  
         -moz-animation: scroll-left 10s linear infinite; /* Firefox */
         -webkit-animation: scroll-left 10s linear infinite;  /* Chrome, Safari, Opera */
         -ms-animation: scroll-left 10s linear infinite; /* IE 9 */
         animation: scroll-left 10s linear infinite;
    }

    .popIn p 
     {
         position: absolute;
         width: 100%;
         height: 100%;
         margin: 0;
         margin-left:auto;
         margin-right:auto;
         line-height: 50px;
         text-align: center;
         white-space: nowrap;

         /* Starting position */

         transform:translateY(-100px);
         -moz-transform:translateY(-100px);  /* Firefox */
         -webkit-transform:translateY(-100px);  /* Chrome, Safari, Opera */
         -ms-transform: translateY(-100px); /* IE 9 */

         /* Apply animation to this element */  
         -moz-animation: popIn 10s linear infinite; /* Firefox */
         -webkit-animation: popIn 10s linear infinite;  /* Chrome, Safari, Opera */
         -ms-animation: popIn 10s linear infinite; /* IE 9 */
         animation: popIn 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%);
      }
    }

    @keyframes popIn {
        0% {
            transform: translateY(-100px); 
             -moz-transform:translateY(-100px);  /* Firefox */
             -webkit-transform:translateY(-100px);  /* Chrome, Safari, Opera */
             -ms-transform: translateY(-100px); /* IE 9 */
        }

      30% {
        transform: translateY(-100px); 
         -moz-transform:translateY(-100px);  /* Firefox */
         -webkit-transform:translateY(-100px);  /* Chrome, Safari, Opera */
         -ms-transform: translateY(-100px); /* IE 9 */
      }
      42% {

        transform: translateY(0); 
         -moz-transform:translateY(0);  /* Firefox */
         -webkit-transform:translateY(0);  /* Chrome, Safari, Opera */
         -ms-transform: translateY(0); /* IE 9 */

        transform: translateX(0); 
         -moz-transform:translateX(0);  /* Firefox */
         -webkit-transform:translateX(0);  /* Chrome, Safari, Opera */
         -ms-transform: translateX(0); /* IE 9 */
      }
      70% {

        transform: translateY(0); 
         -moz-transform:translateY(0);  /* Firefox */
         -webkit-transform:translateY(0);  /* Chrome, Safari, Opera */
         -ms-transform: translateY(0); /* IE 9 */

        transform: translateX(0); 
         -moz-transform:translateX(0);  /* Firefox */
         -webkit-transform:translateX(0);  /* Chrome, Safari, Opera */
         -ms-transform: translateX(0); /* IE 9 */
      }
      100% {

        transform: translateY(0); 
         -moz-transform:translateY(0);  /* Firefox */
         -webkit-transform:translateY(0);  /* Chrome, Safari, Opera */
         -ms-transform: translateY(0); /* IE 9 */

        transform: translateX(-100%); 
         -moz-transform:translateX(-100%);  /* Firefox */
         -webkit-transform:translateX(-100%);  /* Chrome, Safari, Opera */
         -ms-transform: translateX(-100%); /* IE 9 */
      }

    }
</style>

<div id="AdvertBox" > 

    <div class="scroll-left">
        <p style="position: absolute; z-index: 1 ">
            Is your <span style="color:#FF0007">Tax Refund</span> delayed? 
        </p>
    </div>

    <div class="popIn">
        <p style="position: absolute; z-index: 2 ">
            <span style="color:#0A00FF; font-weight:bold;">DRIVE YOUR WAY</span> Today for $0 DOWN! 
        </p>
    </div>



</div>

但是，我在 iPhone 上仍然遇到同样的问题。

Answer 1

用于 css3 动画、变换、过渡属性您需要在这些 css 属性上使用正确的浏览器支持前缀。由于 .popIn p 的 css 属性没有这些浏览器前缀，因此这些动画和转换无法正常工作。

#AdvertBox {
     height: 50px;  
     overflow: hidden;
     position: relative;
     background:black;
     color: white;
     border: 1.75px solid yellow;
     font-size: 1.3em;
     border-radius: 1px;
     width:99%;
     text-align: center;
}

.scroll-left p 

 {
     position: absolute;
     width: 100%;
     height: 100%;
     margin: 0;
     margin-left:auto;
     margin-right:auto;
     line-height: 50px;
     text-align: center;

     /* Starting position */
     -moz-transform:translateX(100%);  /* Firefox */
     -webkit-transform:translateX(100%);  /* Chrome, Safari, Opera */
     -ms-transform: translateX(100%) /* IE 9 */
     transform:translateX(100%);

     /* Apply animation to this element */  
     -moz-animation: scroll-left 10s linear infinite; /* Firefox */
     -webkit-animation: scroll-left 10s linear infinite;  /* Chrome, Safari, Opera */
     -ms-animation: scroll-left 10s linear infinite; /* IE 9 */
     animation: scroll-left 10s linear infinite;
}

.popIn p 
 {
     position: absolute;
     width: 100%;
     height: 100%;
     margin: 0;
     margin-left:auto;
     margin-right:auto;
     line-height: 50px;
     text-align: center;
     white-space: nowrap;

     /* Starting position */

     transform:translateY(-100px);
     -moz-transform:translateY(-100px);  /* Firefox */
     -webkit-transform:translateY(-100px);  /* Chrome, Safari, Opera */
     -ms-transform: translateY(-100px); /* IE 9 */

     /* Apply animation to this element */  
     -moz-animation: popIn 10s linear infinite; /* Firefox */
     -webkit-animation: popIn 10s linear infinite;  /* Chrome, Safari, Opera */
     -ms-animation: popIn 10s linear infinite; /* IE 9 */
     animation: popIn 10s linear infinite;
}