動畫無法在iphone上使用jQuery移動容器上的Safari瀏覽器

我有一個css動畫，適用於iphone的Safari瀏覽器jsfiddle，但如果我嘗試在standalone webpage上運行它而沒有其他東西，它無法運行第二個動畫。奇怪的是，小提琴也不顯示黑色背景和黃色邊框。什麼可能導致這個？動畫無法在iphone上使用jQuery移動容器上的Safari瀏覽器

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

每米洛的建議下，我把它改成

<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同樣的問題。

來源

2017-02-17 Patrick Schomburg

for css3 animation，transform，transitions properties 您需要在這些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; 
}

來源

2017-02-17 17:05:34

我明白你的意思，但爲什麼小提琴會奏效？ –

我對此一無所知，但我的假設是，儘管jsfiddle將iframe上的代碼顯示出來，但他們可能會編譯您的代碼以在這些情況下工作。 –

或您的移動版Safari瀏覽器可能支持該CSS屬性，但您的桌面版本不兼容。 https://www.w3schools.com/cssref/css3_browsersupport.asp –

動畫無法在iphone上使用jQuery移動容器上的Safari瀏覽器

回答

相關問題