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;}
}
}