不透明动画不适用于IE

Question

我有一个带有一些级联不透明动画的动画菜单，这些动画在打开菜单时和悬停每个按钮时执行。它只是每100毫秒为menú上的每个图标添加'.colorHigh'类。

您可以看到 live demo HERE （点击右下方的菜单按钮即可执行）。

在几乎任何浏览器（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; }}