Printable Version of Topic

Click here to view this topic in its original format

HTMLHelp Forums _ Graphics, Flash and Multimedia _ Image change script works in Chrome, not IE9

Posted by: lateball Mar 27 2014, 11:25 PM

As the title says, the script won't work in ie9. It's just 3 images in a sequence. Here's the css:

.fadein img {
margin-left: auto;
margin-right: auto;
position:absolute;
width: 960px;
margin: 0 auto;
-webkit-animation-name: fade;
-webkit-animation-iteration-count: infinite;
-webkit-animation-duration: 21s;
animation-name: fade;
animation-iteration-count: infinite;
animation-duration: 21s;
}
@-webkit-keyframes fade {
0% {opacity: 0;}
20% {opacity: 1;}
33% {opacity: 1;}
53% {opacity: 0;}
100% {opacity: 0;}
}
@keyframes fade {
0% {opacity: 0;}
20% {opacity: 1;}
33% {opacity: 1;}
53% {opacity: 0;}
100% {opacity: 0;}
}

#f1 {

}
#f2 {
-webkit-animation-delay: -14s;
animation-delay: -14s;

}
#f3 {
-webkit-animation-delay: -7s;
animation-delay: -7s;

}

And here's the code in the page:

<div class="fadein">
<img id="f1" src="img/image-1.jpg" width="960" height="363">
<img id="f2" src="img/image-2.jpg" width="960" height="363">
<img id="f3" src="img/image-3.jpg" width="960" height="363">
</div>

Works like a charm in Chrome. Here's a link to the actual page:

http://flintoak.com/index2.html

Posted by: Frederiek Mar 28 2014, 04:11 AM

Keyframe animations are not supported in IE9, only in IE10 and up.
Try searching for "css3 keyframe animation ie9". There might be a polyfill to circumvent that. Or you may need to use another slider.