css - 不透明度动画不适用于 IE

Question

我有一个动画菜单，其中包含一些级联不透明度动画，这些动画在打开菜单和悬停每个按钮时执行。它只是每 100 毫秒向菜单上的每个图标添加“.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; }}