不透明动画不适用于IE

Question

我有一个动画菜单,其中包含一些在打开菜单时以及在悬停每个按钮时执行的级联不透明动画.它只是每100毫秒为menú上的每个图标添加'.colorHigh'类.

你可以在这里看到一个现场演示(点击右下方的菜单按钮来执行它).

几乎在任何浏览器(Opera,Chrome,FF ...)中打开菜单时,动画都能正常工作,但是如果你在IE上打开它(在这种情况下是IE v11),它只会动画完全没有任何不透明性,结果你可以在这张图片中看到:

---

已经按照pleeease方法(过滤器)给出了不透明度,我认为动画拼写正确,如下所示:

@-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

似乎IE不对伪元素应用不透明度.尝试设置opacity:inherit你的伪元素,如下所示: .icon-social::before {opacity:inherit;}.

这解决了它.至少在IE11中.现在无法测试IE10.

有趣的行为.我会记住这一点.

注意:在这种特殊情况下,伪元素的几乎完美的不透明度模拟器可以通过影响其颜色来完成,考虑color:transparent到有效的颜色并在IE 11上正常工作:

例

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