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:
flintoak.com/index2.html