Foros del Web » Creando para Internet » Diseño web »

[SOLUCIONADO] Problema con animation- CSS3

Estas en el tema de Problema con animation- CSS3 en el foro de Diseño web en Foros del Web. 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" ...
  #1 (permalink)  
Antiguo 25/03/2013, 21:09
Avatar de Mariano_Floyd  
Fecha de Ingreso: marzo-2013
Ubicación: Córdoba
Mensajes: 155
Antigüedad: 11 años, 1 mes
Puntos: 14
Problema con animation- CSS3

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!
  #2 (permalink)  
Antiguo 25/03/2013, 21:16
Avatar de Mariano_Floyd  
Fecha de Ingreso: marzo-2013
Ubicación: Córdoba
Mensajes: 155
Antigüedad: 11 años, 1 mes
Puntos: 14
Respuesta: Problema con animation- CSS3

Ya lo solucione, uff después de trabajar durante 8 horas mi cabeza ya no funciona como debe, el error era obvio y tonto, tenia que quitarle el "-o-" al transform. Perdón por hacerlos perder el tiempo al leer el tema, saludos.

Etiquetas: css, firefox, opera
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 08:25.