If I have to be honest, the above already exceeded my CSS3 knowledge :)
div.map { margin: 20px auto; position: relative; background-image: url("../Images/Map.png"); background-repeat: no-repeat; }
div.map:before { content:""; position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; background-image: url("../Images/MapHover.png"); background-repeat: no-repeat; opacity: 0; animation-name: rollmapIE; animation-duration: 3s; animation-iteration-count: infinite; }
@keyframes rollmapIE {
0% { opacity: 0; }
50% { opacity: 1; }
100% { opacity: 0; }
}
Hi
Took a lot of investigation, I mad a few fiddles, played around with code from docs.microsoft.com and then finally found "Background-image is not animatable in IE"
https://developer.mozilla.org/en-US/docs/Web/CSS/background-image