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:
}
@keyframes rollmap {
0% {background:url("../images
50% {background:url("../images
100% {background:url("../images
}
div.map {
margin: 20px auto;
animation-name:rollmap;
animation-duration: 3s;
animation-iteration-count:
}
@keyframes rollmap {
0% {background:url("../images
50% {background:url("../images
100% {background:url("../images
}
CSSHTML
Last Comment
Snarf0001
ASKER
Do u mean there is no solution on IE ? Thx
ASKER CERTIFIED SOLUTION
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
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 questionASKER
Is it possible to change the animation effect such that it will change to gradually to next background, rather than change sharply ?
Thx
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
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:
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.
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; }
}
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.
ASKER
What's the usage of "div.map:before { content:"";
THx
THx
Get an unlimited membership to EE for less than $4 a week.
Unlimited question asking, solutions, articles and more.
: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?
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?
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