Image change script works in Chrome, not IE9 |
Image change script works in Chrome, not IE9 |
lateball |
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 |
Frederiek |
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. |
Lo-Fi Version | Time is now: 25th April 2024 - 10:40 PM |