IE11에서 CSS 애니메이션이 제대로 작동하지 않습니다.

Question

Safari, Chrome 및 Firefox에서는 작동하지만 IE 11에서는 제대로 작동하는 CSS 애니메이션을 사용하고 있습니다. 코드에 문제가없는 것은 아닙니다. 문제가 어디 있는지 말해 주시겠습니까?

클릭 이벤트를 통해 내 표시기가 첫 번째 항목에서 마지막 항목으로 이동합니다.

<div class="divWrapper"> 
    <div class="item-indicator move"></div> 
    <div class="item">1</div> 
    <div class="item">2</div> 
    <div class="item">3</div> 
      . 
      . 
      . 
    <div class="item">8</div> 
</div> 

.item-indicator { 
    position: absolute; 
    background-color: #000; 
    border-color: #000; 
    opacity: 0; 
    transition: opacity .25s; 
    -webkit-transition: opacity .25s; 
    right: 100%; 
} 

.move { 
    -webkit-transition: -webkit-transform .25s; 
    transition: transform .25s; 
    opacity: 1; 
    right: auto; 
} 

.divWrapper [data-position]{ 
    opacity: 1; 
    right: auto; 
} 

.divWrapper [data-position='1']{ 
    -webkit-transform: translateX(0); 
    -ms-transform: translateX(0px); 
    transform: translateX(0); 
} 

.divWrapper [data-position='2']{ 
    -webkit-transform: translateX(calc(100% + 4px)); 
    -ms-transform: translateX(calc(100% + 4px)); 
    transform: translateX(calc(100% + 4px)); 
} 

.divWrapper [data-position='3']{ 
    transform: translateX(calc(200% + 9px)); 
} 

Answer 1

당신은 하나 개의 클래스에서만 불투명도 전환을 설정할 수 없습니다, 및 전환 만에 (당신은 그러나 그들은 서로를 오버 라이딩 할 수 있습니다) 다른 클래스를 변환.

시도 :

.item-indicator { 
    transition: all .25s; 
} 

.move { 
    /*transition: all .25s; -- not needed like this /* 
    transition: opacity .25s, transform .33s; 
} 

귀하의 .move 전환은 변환 전환했다

, 그리고 불투명도, .item-표시 클래스 당신 때문에 overided 전환 속성입니다.