不透明度的动画不工作的IE浏览器 [英] Opacity animations not working on IE

问题描述

我有被打开菜单时，飘摇每个按钮时执行的一些梯级透明度动画的动画菜单。它只是增加了.colorHigh'类的每个图标的菜单上每100毫秒。

您可以在这里看到一个 现场演示 （点击右下角的菜单按钮，执行它）。

当几乎在任何浏览器（歌剧，铬，FF ...），动画正常工作，但如果你打开​​它的IE浏览器（IE V11，在这种情况下）打开菜单，它只是没有动画混浊可言，结果你可以在此图像中看到：

---

混浊被赋予以下 pleeease 方法（过滤器），我觉得动画拼写正确，因为看到就在这里：

  @  -  WebKit的关键帧color_change {0％不透明度{：0;过滤器：α（不透明度= 0）; } 50％{不透明：0.3;过滤器：α（不透明= 30）; } 100％不透明度：0.1;过滤器：α（不透明= 10）; }}
@ -ms关键帧color_change {0％不透明度{：0;过滤器：α（不透明度= 0）; } 50％{不透明：0.3;过滤器：α（不透明= 30）; } 100％不透明度：0.1;过滤器：α（不透明= 10）; }}
@keyframes color_change {0％不透明度{：0;过滤器：α（不透明度= 0）; } 50％{不透明：0.3;过滤器：α（不透明= 30）; } 100％不透明度：0.1;过滤器：α（不透明= 10）; }}.colorHigh {
-webkit-动画：color_change 0.8S易于在转发;
    -ms动画：color_change 0.8S易于在转发;
        动画：color_change 0.8S易于在前锋;}
 

解决方案

这似乎是IE浏览器不伪元素上应用的不透明度。尝试设置不透明度：继承你的伪元素，像这样： .icon社交:: {之前不透明度：继承;} 。

这修复它。至少在IE11。不能测试IE10现在。

有趣的行为。将记住这一点我自己。

---

注意：透明色彩来完成>是一个有效的颜色和正常工作的IE 11：

例如

  @  -  WebKit的关键帧color_out {0％{颜色：#BABABA; } 100％{颜色：透明; }}
@ -ms关键帧color_out {0％{颜色：#BABABA; } 100％{颜色：透明; }}
@keyframes color_out {0％{颜色：#BABABA; } 100％{颜色：透明; }}
 

I have an animated menu with some cascade opacity animations that are executed when opening the menu, and when hovering each button. It just adds '.colorHigh' class to each icon on the menú every 100 ms.

You can see a live demo HERE (click on the right bottom menu button to execute it).

When opening the menu in almost any browser (Opera, Chrome, FF...), the animation works correctly, but if you open it on IE (IE v11, in this case), it just animates no opacities at all, with the result you can see in this image:

---

Opacities have been given following pleeease method (filter), and I think animation is correctly spelled, as seen on here:

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

解决方案

It seems like IE does not apply the opacity on the pseudo element. Try setting opacity:inherit on your pseudo elements like so: .icon-social::before {opacity:inherit;}.

This fixes it. At least in IE11. Can't test IE10 right now.

Interesting behavior. Will keep this in mind myself.

---

NOTE: In this particular case, an almost perfect opacity emulator for pseudoelements can be done by affecting its color, having in mind color:transparent is a valid color and works properly on IE 11:

example

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

这篇关于不透明度的动画不工作的IE浏览器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！