animación css3 que no funciona en cromo

Tengo una animación pequeña que funciona en firefox, pero no en los navegadores webkit. Tal vez alguien vea el error porque lo he buscado durante una hora ... Es parte de una presentación de impress.js, similar a prezi. Gracias!animación css3 que no funciona en cromo

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>

Fuente

2012-09-04 Claudiu Creanga

Si alguien quiere ver la animación ... http://www.messagelab.ro/pages/Presentation.html#/its El o y e deberían moverse, como en firefox ... –

¿tiene el ' @ -webkit-keyframes aia2 {'rules for Chrome? –

buen punto :) por lo que es redundante escribir dentro de -moz-keyframes {-webkit-transform ..}? –

Tienes que poner la regla de la animación en general después de las específicas navegador Web:

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

Y ya que usted tiene -webkit-animation: aia2 , -moz-animation: aia2 et . C usted tiene que fijar la animación para cada navegador como:

@-moz-keyframes aia2{ 
    ... 
} 

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

Fuente

2012-09-04 14:07:59

sí, ¡funciona ahora! ¡Gracias! –

eres bienvenido :) –

Chrome v43 se redujo el prefijo -webkit- para la animación así que si esto funcionó antes, pero ahora no, eso es probablemente por qué.

Fuente

2015-06-26 18:20:22

animación css3 que no funciona en cromo

Respuesta

Cuestiones relacionadas