动画无法在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浏览器

回答

相关问题