Css 在jquery移动容器中，iphone上的Safari动画不起作用

我有一个css动画，可以在a中的iphone safari上运行，但是如果我尝试在a上运行它而没有其他内容，它将无法运行第二个动画。奇怪的是，小提琴也没有显示黑色背景和黄色边框。这可能是什么原因造成的

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

#广告箱{
高度：50px；
溢出：隐藏；
位置：相对位置；
背景：黑色；
颜色：白色；
边框：1.75px实心黄色；
字体大小：1.3em；
边界半径：1px；
宽度：99%；
文本对齐：居中；
}
.向左滚动p
{
位置：绝对位置；
宽度：100%；
身高：100%；
保证金：0；
左边距：自动；
右边距：自动；
线高：50px；
文本对齐：居中；
/*起始位置*/
-moz变换：translateX（100%）；
-webkit转换：translateX（100%）；
转化：translateX（100%）；
/*将动画应用于此元素*/
-webkit动画：向左滚动10秒线性无限；
动画：向左滚动10秒线性无限；
}
波平
{
位置：绝对位置；
宽度：100%；
身高：100%；
保证金：0；
左边距：自动；
右边距：自动；
线高：50px；
文本对齐：居中；
空白：nowrap；
/*起始位置*/
转换：translateY（-100px）；
/*将动画应用于此元素*/
动画：popIn 10s线性无限；
}
@关键帧向左滚动{
0% {
转化：translateX（100%）；
}
25% {
不透明度：1；
转化：translateX（0%）；
}
39% {
不透明度：0；
转化：translateX（0%）；
}
100% {
不透明度：0；
转化：translateX（0%）；
}
}
@关键帧popIn{
0% {
转换：转换（0%，-100px）；
}
30% {
转换：转换（0%，-100px）；
}
42% {
转换：翻译（0%，0%）；
}
70% {
转换：翻译（0%，0%）；
}
100% {
转换：转换（-100%，0%）；
}
}

你的退税延迟了吗？


今天就开车去，只需0美元！

根据米洛的建议，我把它改成了

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

#广告箱{
高度：50px；
溢出：隐藏；
位置：相对位置；
背景：黑色；
颜色：白色；
边框：1.75px实心黄色；
字体大小：1.3em；
边界半径：1px；
宽度：99%；
文本对齐：居中；
}
.向左滚动p
{
位置：绝对位置；
宽度：100%；
身高：100%；
保证金：0；
左边距：自动；
右边距：自动；
线高：50px；
文本对齐：居中；
/*起始位置*/
-moz转换：translateX（100%）；/*Firefox*/
-webkit转换：translateX（100%）；/*Chrome、Safari、Opera*/
-ms转换：translateX（100%）/*IE 9*/
转化：translateX（100%）；
/*将动画应用于此元素*/
-moz动画：向左滚动10秒线性无限；/*Firefox*/
-webkit动画：向左滚动10秒线性无限；/*Chrome、Safari、Opera*/
-ms动画：向左滚动10秒线性无限；/*IE 9*/
动画：向左滚动10秒线性无限；
}
波平
{
位置：绝对位置；
宽度：100%；
身高：100%；
保证金：0；
左边距：自动；
右边距：自动；
线高：50px；
文本对齐：居中；
空白：nowrap；
/*起始位置*/
转换：translateY（-100px）；
-moz转换：translateY（-100px）；/*Firefox*/
-webkit转换：translateY（-100px）；/*Chrome、Safari、Opera*/
-ms转换：translateY（-100px）；/*IE 9*/
/*将动画应用于此元素*/
-moz动画：popIn 10s linear infinite；/*Firefox*/
-webkit动画：popIn 10s linear infinite；/*Chrome、Safari、Opera*/
-ms动画：popIn 10s线性无限；/*IE 9*/
动画：popIn 10s线性无限；
}
@关键帧向左滚动{
0% {
转化：translateX（100%）；
}
25% {
不透明度：1；
转化：translateX（0%）；
}
39% {
不透明度：0；
转化：translateX（0%）；
}
100% {
不透明度：0；
转化：translateX（0%）；
}
}
@关键帧popIn{
0% {
转换：translateY（-100px）；
-moz转换：translateY（-100px）；/*Firefox*/
-webkit转换：translateY（-100px）；/*Chrome、Safari、Opera*/
-ms转换：translateY（-100px）；/*IE 9*/
}
30% {
转换：translateY（-100px）；
-moz转换：translateY（-100px）；/*Firefox*/
-webkit转换：translateY（-100px）；/*Chrome、Safari、Opera*/
-ms转换：translateY（-100px）；/*IE 9*/
}
42% {
变换：translateY（0）；
-moz转换：translateY（0）；/*Firefox*/
-webkit转换：translateY（0）；/*Chrome、Safari、Opera*/
-ms变换：translateY（0）；/*IE 9*/
变换：translateX（0）；
-moz转换：translateX（0）；/*Firefox*/
-webkit转换：translateX（0）；/*Chrome、Safari、Opera*/
-ms变换：translateX（0）；/*IE 9*/
}
70% {
变换：translateY（0）；
-moz转换：translateY（0）；/*Firefox*/
-webkit转换：translateY（0）；/*铬，S
#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;
}