Foros del Web » Creando para Internet » CSS »

Animacion con @keyframes en Internet explorer

 Estas en el tema de Animacion con @keyframes en Internet explorer en el foro de CSS en Foros del Web. Hola, He hecho una galeria de fotos que pasa automaticamente con @keyframes y funcina perfectamente, pero solo para Chrome. Para Internet explorer no funciona aunque ...
  #1 (permalink)  
Antiguo 28/05/2014, 09:26
 
Fecha de Ingreso: mayo-2014
Mensajes: 1
Antigüedad: 10 años, 6 meses
Puntos: 0
Animacion con @keyframes en Internet explorer
Hola,

He hecho una galeria de fotos que pasa automaticamente con @keyframes y funcina perfectamente, pero solo para Chrome. Para Internet explorer no funciona aunque en teoria es compatible a partir de la versión 10.0. Alguien sabe alguna solucion? Gracias por adelantado.

Código: 
#galeriaci1{
	width: 400px;
	height: 400px;
	background-size: 400px 400px;
	background-repeat: no-repeat;
	margin: auto;
	margin-top: 5%;
 
	animation-name: galci1;
	-webkit-animation-name:galci1;
	-moz-animation-name:galci1;
	-o-animation-name:galci1;
 
	animation-duration:95s;
	-webkit-animation-duration:95s;
	-moz-animation-duration:95s;
	-o-animation-duration:95s;
 
	animation-iteration-count:infinite;
	-webkit-animation-iteration-count:infinite;
	-moz-animation-iteration-count:infinite;
	-o-animation-iteration-count:infinite;
}
 
@keyframes galci1{
	0%{ background-image: url(galeriacasainterior1/1.jpg);
		background-size: 400px 300px;
		background-repeat: no-repeat;}
	4%{ background-image: url(galeriacasainterior1/2.jpg);
		 background-size: 300px 400px;
		 background-repeat: no-repeat;}	
	8%{ background-image: url(galeriacasainterior1/3.jpg);
		  background-size: 400px 300px;
		  background-repeat: no-repeat;}
	12%{ background-image: url(galeriacasainterior1/4.jpg);
		  background-size: 400px 300px;
		  background-repeat: no-repeat;}
	16%{ background: url(galeriacasainterior1/5.jpg);
		  background-size: 400px 300px;
		  background-repeat: no-repeat;}
	20%{ background: url(galeriacasainterior1/6.jpg);
		  background-size: 400px 300px;
		  background-repeat: no-repeat;}
	24%{ background: url(galeriacasainterior1/7.jpg);
		  background-size: 300px 400px;
		  background-repeat: no-repeat;}
	28%{ background: url(galeriacasainterior1/8.jpg);
		  background-size: 400px 300px;
		  background-repeat: no-repeat;}
	32%{ background: url(galeriacasainterior1/9.jpg);
		  background-size: 400px 300px;
		  background-repeat: no-repeat;}
    36%{ background: url(galeriacasainterior1/10.jpg);
		  background-size: 300px 400px;
		  background-repeat: no-repeat;}
    40%{ background: url(galeriacasainterior1/11.jpg);
		  background-size: 300px 400px;
		  background-repeat: no-repeat;}
	44%{ background: url(galeriacasainterior1/12.jpg);
		  background-size: 400px 300px;
		  background-repeat: no-repeat;}
	48%{ background: url(galeriacasainterior1/13.jpg);
		  background-size: 400px 300px;
		  background-repeat: no-repeat;}
	52%{ background: url(galeriacasainterior1/14.jpg);
		  background-size: 400px 300px;
		  background-repeat: no-repeat;}
	56%{ background: url(galeriacasainterior1/15.jpg);
		  background-size: 300px 400px;
		  background-repeat: no-repeat;}
	60%{ background: url(galeriacasainterior1/16.jpg);
		  background-size: 300px 400px;
		  background-repeat: no-repeat;}
	64%{ background: url(galeriacasainterior1/17.jpg);
		  background-size: 400px 300px;
		  background-repeat: no-repeat;}
	68%{ background: url(galeriacasainterior1/18.jpg);
		  background-size: 300px 400px;
		  background-repeat: no-repeat;}
	72%{ background: url(galeriacasainterior1/19.jpg);
		  background-size: 400px 300px;
		  background-repeat: no-repeat;}
	76%{ background: url(galeriacasainterior1/20.jpg);
		  background-size: 300px 400px;
		  background-repeat: no-repeat;}
	80%{ background: url(galeriacasainterior1/21.jpg);
		  background-size: 400px 300px;
		  background-repeat: no-repeat;}
	84%{ background: url(galeriacasainterior1/22.jpg);
		  background-size: 300px 400px;
		  background-repeat: no-repeat;}
	88%{ background: url(galeriacasainterior1/23.jpg);
		  background-size: 400px 300px;
		  background-repeat: no-repeat;}
	92%{ background: url(galeriacasainterior1/24.jpg);
		  background-size: 400px 300px;
		  background-repeat: no-repeat;}
	100%{ background: url(galeriacasainterior1/1.jpg);
		  background-size: 400px 300px;
		  background-repeat: no-repeat;}	  
}
 
 
@-webkit-keyframes galci1{
	0%{ background-image: url(galeriacasainterior1/1.jpg);
		background-size: 400px 300px;
		background-repeat: no-repeat;}
	4%{ background-image: url(galeriacasainterior1/2.jpg);
		 background-size: 300px 400px;
		 background-repeat: no-repeat;}	
	8%{ background-image: url(galeriacasainterior1/3.jpg);
		  background-size: 400px 300px;
		  background-repeat: no-repeat;}
	12%{ background-image: url(galeriacasainterior1/4.jpg);
		  background-size: 400px 300px;
		  background-repeat: no-repeat;}
	16%{ background: url(galeriacasainterior1/5.jpg);
		  background-size: 400px 300px;
		  background-repeat: no-repeat;}
	20%{ background: url(galeriacasainterior1/6.jpg);
		  background-size: 400px 300px;
		  background-repeat: no-repeat;}
	24%{ background: url(galeriacasainterior1/7.jpg);
		  background-size: 300px 400px;
		  background-repeat: no-repeat;}
	28%{ background: url(galeriacasainterior1/8.jpg);
		  background-size: 400px 300px;
		  background-repeat: no-repeat;}
	32%{ background: url(galeriacasainterior1/9.jpg);
		  background-size: 400px 300px;
		  background-repeat: no-repeat;}
    36%{ background: url(galeriacasainterior1/10.jpg);
		  background-size: 300px 400px;
		  background-repeat: no-repeat;}
    40%{ background: url(galeriacasainterior1/11.jpg);
		  background-size: 300px 400px;
		  background-repeat: no-repeat;}
	44%{ background: url(galeriacasainterior1/12.jpg);
		  background-size: 400px 300px;
		  background-repeat: no-repeat;}
	48%{ background: url(galeriacasainterior1/13.jpg);
		  background-size: 400px 300px;
		  background-repeat: no-repeat;}
	52%{ background: url(galeriacasainterior1/14.jpg);
		  background-size: 400px 300px;
		  background-repeat: no-repeat;}
	56%{ background: url(galeriacasainterior1/15.jpg);
		  background-size: 300px 400px;
		  background-repeat: no-repeat;}
	60%{ background: url(galeriacasainterior1/16.jpg);
		  background-size: 300px 400px;
		  background-repeat: no-repeat;}
	64%{ background: url(galeriacasainterior1/17.jpg);
		  background-size: 400px 300px;
		  background-repeat: no-repeat;}
	68%{ background: url(galeriacasainterior1/18.jpg);
		  background-size: 300px 400px;
		  background-repeat: no-repeat;}
	72%{ background: url(galeriacasainterior1/19.jpg);
		  background-size: 400px 300px;
		  background-repeat: no-repeat;}
	76%{ background: url(galeriacasainterior1/20.jpg);
		  background-size: 400px 300px;
		  background-repeat: no-repeat;}
	80%{ background: url(galeriacasainterior1/21.jpg);
		  background-size: 400px 300px;
		  background-repeat: no-repeat;}
	84%{ background: url(galeriacasainterior1/22.jpg);
		  background-size: 300px 400px;
		  background-repeat: no-repeat;}
	88%{ background: url(galeriacasainterior1/23.jpg);
		  background-size: 400px 300px;
		  background-repeat: no-repeat;}
	92%{ background: url(galeriacasainterior1/24.jpg);
		  background-size: 300px 400px;
		  background-repeat: no-repeat;}
	100%{ background: url(galeriacasainterior1/1.jpg);
		  background-size: 400px 300px;
		  background-repeat: no-repeat;}
 
}
 
 
 	  
}
  #2 (permalink)  
Antiguo 30/05/2014, 17:41
 
Fecha de Ingreso: abril-2014
Ubicación: 3 metros sobre la casa de abajo
Mensajes: 40
Antigüedad: 10 años, 7 meses
Puntos: 6
Respuesta: Animacion con @keyframes en Internet explorer
Podrías usar el prefijo para que IE lo soporte, mas no sé si aun con eso sea soportado por IE.

El prefijo es:

-ms-

Así como lo hiciste para -webkit-, -moz-, -o-
__________________
Vivir y aprender... ojalá pudiera resistir por lo menos 150 años.

Etiquetas: animacion, background, explorer, internet, width
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


« Tema Anterior | Próximo Tema »


La zona horaria es GMT -6. Ahora son las 21:58.