Buenas a todos, tengo un problema con la propiedad animation de css3, específicamente con la declaración de los keyframes. Paso a comentarles, tengo una "animación" (es una imagen que gira para un lado y el otro) la cual se ve perfectamente en chrome, pero tengo conflicto con el opera y el firefox (o funciona en uno, o lo hace en el otro).
Les dejo el código para que entiendan:
Código:
.imgtop{
overflow: hidden;
margin: 4.5em auto 0 auto;
padding: 0 1.9em 0 1.9em;
-webkit-animation: gira 3s alternate infinite;
-moz-animation: gira 3s alternate infinite;
animation :gira 3s alternate infinite;
height: auto;
max-width: 100%;
}
@-webkit-keyframes gira
{
0% {top: 0px; left: 0px;-webkit-transform: rotate(0deg);}
50% {top: 0px; left: 0px; -webkit-transform: rotate(180deg);}
100% {top: 0px; left:0px; -webkit-transform: rotate(360deg);}
}
@-moz-keyframes gira
{
0% {top: 0px; left: 0px;-moz-transform: rotate(0deg);}
50% {top: 0px; left: 0px; -moz-transform: rotate(180deg);}
100% {top: 0px; left:0px; -moz-transform: rotate(360deg);}
}
@keyframes gira
{
0% {top: 0px; left: 0px;-o-transform: rotate(0deg);}
50% {top: 0px; left: 0px; -o-transform: rotate(180deg);}
100% {top: 0px; left:0px; -o-transform: rotate(360deg);}
}
El tema es el siguiente, tal como esta el codigo, me funciona en el chrome y en el opera, pero no en el mozilla. Para que funcione en el mozilla, tengo que quitar:
Código:
@keyframes gira
{
0% {top: 0px; left: 0px;-o-transform: rotate(0deg);}
50% {top: 0px; left: 0px; -o-transform: rotate(180deg);}
100% {top: 0px; left:0px; -o-transform: rotate(360deg);}
}
Pero al quitar eso, no funciona ya en el opera, así que mi problema radica, en como hacer para que funcione en ambos sin conflictos.
Espero me puedan ayudar, porque no le encuentro la vuelta. Desde ya muchas gracias por tomarse el tiempo en leer y responder. Saludos!