Link to home
Start Free TrialLog in
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; }
}
Avatar of Michel Plungjan
Michel Plungjan
Flag of Denmark image

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

Avatar of Simon Leung
Simon Leung

ASKER

Do u mean there is no solution on IE ? Thx
ASKER CERTIFIED SOLUTION
Avatar of Michel Plungjan
Michel Plungjan
Flag of Denmark image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Is it possible to change the animation effect such that it will change to gradually to next background, rather than change sharply ?

Thx

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

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.
What's the usage of "div.map:before { content:"";

THx
: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?