Avatar of Simon Leung
Simon Leung
 asked on

keyframes not support in IE

I find that the following code doesn't work in IE. It works perfect in chrome or firebox. Any idea ?

div.map {
   margin: 20px auto;
   animation-name:rollmap;
   animation-duration: 3s;
   animation-iteration-count:infinite;
}

@keyframes rollmap {
      0% {background:url("../images/Map.png") no-repeat; }
      50% {background:url("../images/Maphover.png") no-repeat; }
      100% {background:url("../images/Map.png") no-repeat; }
}
CSSHTML

Avatar of undefined
Last Comment
Snarf0001

8/22/2022 - Mon
Michel Plungjan

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

Simon Leung

ASKER
Do u mean there is no solution on IE ? Thx
ASKER CERTIFIED SOLUTION
Michel Plungjan

Log in or sign up to see answer
Become an EE member today7-DAY FREE TRIAL
Members can start a 7-Day Free trial then enjoy unlimited access to the platform
Sign up - Free for 7 days
or
Learn why we charge membership fees
We get it - no one likes a content blocker. Take one extra minute and find out why we block content.
Not exactly the question you had in mind?
Sign up for an EE membership and get your own personalized solution. With an EE membership, you can ask unlimited troubleshooting, research, or opinion questions.
ask a question
Simon Leung

ASKER
Is it possible to change the animation effect such that it will change to gradually to next background, rather than change sharply ?

Thx
This is the best money I have ever spent. I cannot not tell you how many times these folks have saved my bacon. I learn so much from the contributors.
rwheeler23
Michel Plungjan

If I have to be honest, the above already exceeded my CSS3 knowledge :)

Snarf0001

You could work around it with a :before element and play with the opacity instead:

        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; }
        }

Open in new window


That puts the static map.png in the background of the actual element, and adds a pseudo element with mapHover on it, with 0 opacity.
And then animates the opacity of the :before instead of the main one.

if your images have transparency, this will  NOT hide the original, just overlaying the top one, so you'd have to add another :after to get it to work properly and animate both.
Obviously this also won't work if you're already using :before for something else.
Simon Leung

ASKER
What's the usage of "div.map:before { content:"";

THx
Get an unlimited membership to EE for less than $4 a week.
Unlimited question asking, solutions, articles and more.
Snarf0001

:before and :after are called "pseudo-elements".  They're basically virtual / fake / new html elements that are inserted into the DOM before or after the content of the element you're targeting.

So if you had:
<p>asdf</p>

and added
p:before { content:"123 "; }

That would add "123" inside the p tag, before the "asdf".

You have to specify the content property in order for them to render, but it doesn't have to be anything meaningful.
So basically we put a virtual, empty element inside the <div> tag, before the content, and with the hover background image applied to it.
Then the animation is just toggling the opacity of that virtual element.

Not sure that was the best explanation, but did that make sense?