不透明度动画在IE浏览器上无法正常工作。

Question

不透明度动画在IE浏览器上无法正常工作。

cssinternet-exploreranimation

3

我有一个带有级联透明度动画的动态菜单，当打开菜单并悬停在每个按钮上时，执行这些动画。它会每100毫秒为菜单中的每个图标添加“.colorHigh”类。

您可以在此处查看实时演示（单击右下角菜单按钮以执行它）。

在几乎所有浏览器（Opera、Chrome、FF...）中打开菜单时，动画都能正常工作，但是如果在IE（在本例中为IE v11）中打开，则根本不会执行任何透明度动画，其结果如下图所示：

result

透明度使用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 ;}

- Biomehanika

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- c_k · Accepted Answer

似乎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; }}