css3 एनीमेशन क्रोम

Question

में काम नहीं कर रहा है मेरे पास एक छोटी सी एनीमेशन है जो फ़ायरफ़ॉक्स में काम कर रही है, लेकिन वेबकिट ब्राउज़र में नहीं। हो सकता है कि कोई गलती देखता है क्योंकि मैंने एक घंटे की तलाश की है ... यह prezi के समान इंप्रेशन.जेएस प्रेजेंटेशन का हिस्सा है। धन्यवाद!

सीएसएस:

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


    } 
} 

एचटीएमएल:

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

Answer 1

आप ब्राउज़र विशिष्ट लोगों के बाद सामान्य एनीमेशन नियम डाल करने के लिए है:

-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 एट सी। आप की तरह प्रत्येक ब्राउज़र के लिए एनीमेशन सेट करने के लिए: यदि ऐसा है तो यह अब से पहले नहीं बल्कि काम किया

@-moz-keyframes aia2{ 
    ... 
} 

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

Answer 2

क्रोम v43 एनीमेशन के लिए -webkit- उपसर्ग गिरा दिया, कि शायद यही कारण है।