불투명도 애니메이션이 IE에서 작동하지 않습니다.

Question

메뉴를 열 때 및 각 단추를 가리키면 실행되는 일부 연속 된 불투명도 애니메이션이있는 애니메이션 메뉴가 있습니다. 그것은 단지 100ms마다 menu의 각 아이콘에 '.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을 테스트 할 수 없습니다.

재미있는 행동. 이것을 내 자신에게 명심하겠습니다.

---

참고 :이 특별한 경우에, pseudoelements에 대한 거의 완벽한 투명도 에뮬레이터가 마음 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; }}