不透明动画在 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; }}