The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
Reply to this topicStart new topic
> Image change script works in Chrome, not IE9
lateball
post Mar 27 2014, 11:25 PM
Post #1





Group: Members
Posts: 2
Joined: 21-March 14
Member No.: 20,586



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

This post has been edited by lateball: Mar 27 2014, 11:45 PM
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Frederiek
post Mar 28 2014, 04:11 AM
Post #2


Programming Fanatic
********

Group: Members
Posts: 5,146
Joined: 23-August 06
From: Europe
Member No.: 9



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.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post

Reply to this topicStart new topic
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:

 



- Lo-Fi Version Time is now: 28th March 2024 - 08:55 PM