css3アニメーションがクロムで動作しない

Question

私はFirefoxで動作している小さなアニメーションを持っていますが、Webkitブラウザでは動作しません。たぶん、誰かが私が1時間探してきた間違いを見ているかもしれません...それはプレゼンテーションに似たimpress.jsプレゼンテーションの一部です。 ありがとう！

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> 

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など。C君のような各ブラウザ用にアニメーションを設定する必要があります。これは今までになく働いていたので、もし

@-moz-keyframes aia2{ 
    ... 
} 

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

Answer 2

クロームV43は、アニメーションの-webkit-接頭辞を落とし、それはおそらく理由です。