1 reply [Last post]
polj
polj's picture
Offline
newbie
Last seen: 8 years 19 weeks ago
Timezone: GMT+2
Joined: 2014-05-28
Posts: 1
Points: 2

Hi,

I made a animation that changes automatically the image with @keyframes, but it doesnt work in internet explorer although it's compatible for version 10 or higher. In chrome it works fine (when i add the webkit prefix). Does someone know, how i can make that it works on IE, too? Thank you in advance.

<css>
#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;}
 
}
 
 
 
 
 
@-moz-keyframes galci1{
	0%{ background: url(galeriacasainterior1/1.jpg);
		background-size: 400px 300px;
		background-repeat: no-repeat;}
	4%{ background: url(galeriacasainterior1/2.jpg);
		 background-size: 300px 400px;
		 background-repeat: no-repeat;}	
	8%{ background: url(galeriacasainterior1/3.jpg);
		  background-size: 400px 300px;
		  background-repeat: no-repeat;}
	12%{ background: 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;}	  
}

helldog2004
helldog2004's picture
Offline
Enthusiast
Netherlands
Last seen: 6 years 9 weeks ago
Netherlands
Timezone: GMT+2
Joined: 2014-03-02
Posts: 205
Points: 239

Add this piece of code behind

Add this piece of code behind the -moz- version.

@-o-keyframes galci1{
	0%{ background: url(galeriacasainterior1/1.jpg);
		background-size: 400px 300px;
		background-repeat: no-repeat;}
	4%{ background: url(galeriacasainterior1/2.jpg);
		 background-size: 300px 400px;
		 background-repeat: no-repeat;}	
	8%{ background: url(galeriacasainterior1/3.jpg);
		  background-size: 400px 300px;
		  background-repeat: no-repeat;}
	12%{ background: 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;}	  
}
 
@-ms-keyframes galci1{
	0%{ background: url(galeriacasainterior1/1.jpg);
		background-size: 400px 300px;
		background-repeat: no-repeat;}
	4%{ background: url(galeriacasainterior1/2.jpg);
		 background-size: 300px 400px;
		 background-repeat: no-repeat;}	
	8%{ background: url(galeriacasainterior1/3.jpg);
		  background-size: 400px 300px;
		  background-repeat: no-repeat;}
	12%{ background: 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;}	  
}

Also add this inside your code:

-ms-animation-name:galci1;
-ms-animation-duration:95s;
-ms-animation-iteration-count:infinite;

Then it should work.
Cheers, Henk

Check Maximum Webdesign for your online solutions