css3動畫不在鉻中工作

我有一個在firefox中工作的小動畫，但不是在webkit瀏覽器中。也許有人看到我找了一個小時的錯誤原因......它是impress.js演示文稿的一部分，類似於prezi。謝謝！css3動畫不在鉻中工作

CSS：

#its.step.present h5{ 

display: inline-block; 
position:absolute; 




animation: aia2 5s linear infinite alternate; 
-moz-animation: aia2 5s linear infinite alternate; 
-webkit-animation: aia2 5s linear infinite alternate; 
-ms-animation: aia2 5s linear infinite alternate; 
-o-animation: aia2 5s linear infinite alternate; 

-moz-animation-delay: 4s; 
-webkit-animation-delay: 4s; 
-ms-animation-delay: 4s; 
-o-animation-delay: 4s; 
animation-delay: 4s; 


} 
@-moz-keyframes aia2{ 
    0%{ 

     left:120px; 
     -moz-transform:scale(1) rotate(0deg); 
     -webkit-transform:scale(1) rotate(0deg); 
     -ms-transform:scale(1) rotate(0deg); 
     -o-transform:scale(1) rotate(0deg); 
     transform:scale(1) rotate(0deg); 

     color: red; 
    } 
    90%{ 
     left: 580px; 

     -moz-transform:scale(1) rotate(2000deg); 
     -webkit-transform:scale(1) rotate(2000deg); 
     -ms-transform:scale(1) rotate(2000deg); 
     -o-transform:scale(1) rotate(2000deg); 
     transform:scale(1) rotate(2000deg); 

    } 
    100%{ 
     left: 580px; 


    } 
}

HTML：

<div id="its" class="step" data-x="850" data-y="3000" data-rotate="90" data-scale="5"> 
     <p> 
      <ul> 
       <li>Web Development,</li> 
       <li>Web Design,</li> 
       <li>Log<h5>o</h5>&nbsp;&nbsp; Design,</li> 
       <li>Web Marketing,</li> 
      </ul> 

      <ul class="doua"> 
       <li><h6>e</h6>&nbsp;&nbsp;Commerce,</li> 
       <li>CMS (WP, J, D),</li> 
       <li>Cust&nbsp; m Apps</li> 
       <li>and others.</li> 
      </ul> 
     </p> 
    </div>

來源

2012-09-04 Claudiu Creanga

如果有人想看動畫... http://www.messagelab.ro/pages/Presentation.html#/its o和e應該移動，如在Firefox中... –

你有' @ -webkit-keyframes aia2 {'適用於Chrome的規則？ –

好點:)所以寫在-moz-keyframes {-webkit-transform ..}裏面是多餘的？ –

你必須把一般的動畫規則後瀏覽器特定的：

-webkit-animation: aia2 5s linear infinite alternate; 
    -moz-animation: aia2 5s linear infinite alternate; 
    -ms-animation: aia2 5s linear infinite alternate; 
    -o-animation: aia2 5s linear infinite alternate; 
     animation: aia2 5s linear infinite alternate; /* this comes last */

而且因爲你有-webkit-animation: aia2 ，-moz-animation: aia2 et 。c您必須設置動畫像每個瀏覽器：

@-moz-keyframes aia2{ 
    ... 
} 

@-webkit-keyframes aia2{ 
    ... 
} 
@-o-keyframes aia2{ 
    ... 
}

來源

2012-09-04 14:07:59

是的，它現在的作品！謝謝！ –

歡迎您:) –

的Chrome V43下降爲動畫-webkit-前綴，因此，如果這現在的工作之前，但沒有，這可能是爲什麼。

來源

2015-06-26 18:20:22

css3動畫不在鉻中工作

回答

相關問題