I've encountered a problem with a specific section of a website I created. This section functions perfectly on all browsers and older versions of Internet Explorer, but not on the latest versions. It seems that IE no longer supports [IF] statements in HTML and the <animation> command. The issue lies with a small animation featuring a series of images, defined by the following CSS:
.fadein img {
position: absolute;
display: block;
margin-left: auto;
margin-right: auto;
-webkit-animation-name: fade;
-webkit-animation-iteration-count: infinite;
-webkit-animation-duration: 32s;
animation-name: fade;
animation-iteration-count: infinite;
animation-duration: 32s;
}
@-webkit-keyframes fade {
0% { opacity: 0; }
20% { opacity: 1; }
33% { opacity: 0; }
53% { opacity: 0; }
100% { opacity: 0; }
}
@keyframes fade {
0% { opacity: 0; }
20% { opacity: 1; }
33% { opacity: 0; }
53% { opacity: 0; }
100% { opacity: 0; }
}
#f1 {
-webkit-animation-delay: -4s;
}
#f2 {
-webkit-animation-delay: -8s;
}
#f3 {
-webkit-animation-delay: -16s;
}
#f4 {
-webkit-animation-delay: -24s;
}
#f5 {
-webkit-animation-delay: -32s;
}
This animation is currently live on the webpage , showcasing quotes near the footer. Despite my research indicating that IE should support "animation-name" within the CSS code and be capable of emulating an older version of itself, my attempts to use JavaScript for emulation have yielded similar results. Any assistance would be greatly appreciated. Thank you.
Additionally, in the newer versions of IE, the images do appear and fade out, but they do so simultaneously and fail to repeat, which deviates from the desired effect. To view the intended animation, please refer to the Chrome version of the site. Thank you.
Here is the corresponding HTML:
<div id="Quote-Images" class="fadein">
<img id="f5" src="img/quote_05.jpg" alt="">
<img id="f4" src="img/quote_04.jpg" alt="">
<img id="f3" src="img/quote_01.jpg" alt="">
<img id="f2" src="img/quote_02.jpg" alt="">
<img id="f1" src="img/quote_03.jpg" alt="">
</div>