Opacity animations not working on IE

Question

I have an animated menu with some cascade opacity animations that are executed when opening the menu, and when hovering each button. It just adds '.colorHigh' class to each icon on the menú every 100 ms.

You can see a live demo HERE (click on the right bottom menu button to execute it).

When opening the menu in almost any browser (Opera, Chrome, FF...), the animation works correctly, but if you open it on IE (IE v11, in this case), it just animates no opacities at all, with the result you can see in this image:

---

Opacities have been given following pleeease method (filter), and I think animation is correctly spelled, as seen on here:

@-webkit-keyframes color_change {  0% { opacity: 0; filter:alpha(opacity=0); }  50% { opacity: 0.3; filter:alpha(opacity=30); }  100% { opacity: 0.1; filter:alpha(opacity=10); }}
@-ms-keyframes color_change {  0% { opacity: 0; filter:alpha(opacity=0); }  50% { opacity: 0.3; filter:alpha(opacity=30); }    100% { opacity: 0.1; filter:alpha(opacity=10); }}
@keyframes color_change {  0% { opacity: 0; filter:alpha(opacity=0); }  50% { opacity: 0.3; filter:alpha(opacity=30); }    100% { opacity: 0.1; filter:alpha(opacity=10); }}

.colorHigh{
-webkit-animation:color_change  0.8s ease-in forwards ;
    -ms-animation:color_change  0.8s ease-in forwards ;
        animation:color_change  0.8s ease-in forwards ;}

Answer 1

It seems like IE does not apply the opacity on the pseudo element. Try setting opacity:inherit on your pseudo elements like so: .icon-social::before {opacity:inherit;}.

This fixes it. At least in IE11. Can't test IE10 right now.

Interesting behavior. Will keep this in mind myself.

---

NOTE: In this particular case, an almost perfect opacity emulator for pseudoelements can be done by affecting its color, having in mind color:transparent is a valid color and works properly on IE 11:

example

@-webkit-keyframes color_out {  0% { color: #BABABA; }  100% { color: transparent; }}
@-ms-keyframes color_out {  0% { color: #BABABA; }    100% { color: transparent; }}
@keyframes color_out {  0% { color: #BABABA; }    100% { color: transparent; }}