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

问题描述

我有一个动画菜单，有一些级联不透明动画，当打开菜单，当悬停每个按钮时执行。

你可以看到一个 方法（过滤），我认为动画拼写正确，如下所示：

  @  -  webkit-keyframes color_change {0％{opacity：0; filter：alpha（opacity = 0）; } 50％{不透明度：0.3; filter：alpha（opacity = 30）; } 100％{不透明度：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％{不透明度：0.1; filter：alpha（opacity = 10）; }} 
 @keyframes color_change {0％{opacity：0; filter：alpha（opacity = 0）; } 50％{不透明度：0.3; filter：alpha（opacity = 30）; } 100％{不透明度：0.1; filter：alpha（opacity = 10）; }} 
 
 .colorHigh {
 -webkit-animation：color_change 0.8s ease-in forward; 
 -ms-animation：color_change 0.8s ease-in forward; 
 animation：color_change 0.8s ease-in forward;} 
  

解决方案

看起来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; }} 
  

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屋！