jqueryモバイルコンテナのiphoneでSafariでアニメーションが動作しない

Question

iphoneのsafariでjsfiddleで動作するCSSアニメーションがありますが、他に何も入れずにstandalone webpageで実行しようとすると、 2番目のアニメーション。奇妙なことに、フィドルも黒い背景と黄色の境界線を表示しません。これを引き起こす原因は何ですか？ミロの提案パー

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

、私はしかし、私はまだiPhone上で同じ問題を持っている

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

にそれを変更しました。

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