IE11에서 키 프레임이 올바르게 작동하지 않습니다.

Question

선택 상자가 강조 표시되는 선택 상자 애니메이션이 있습니다. 분명히 키 프레임 애니메이션은 Chrome에서 제대로 작동하지만 IE11에서는 제대로 작동하지 않습니다. IE11에서도 작동하도록 코드에서 무엇을 변경해야하는지 알고 싶습니다.

.animate-box{ 
 
    height: 100%; 
 
    -moz-animation-duration: 0.5s; 
 
     -webkit-animation-duration: 0.5s; 
 
     -moz-animation-name: changeShadow; 
 
     -webkit-animation-name: changeShadow; 
 
     -moz-animation-iteration-count: infinite; 
 
     -webkit-animation-iteration-count: infinite; 
 
     -moz-animation-direction: alternate; 
 
     -webkit-animation-direction: alternate; 
 
    border: 1px solid black; 
 
} 
 
@-webkit-keyframes changeShadow{ 
 
    from { 
 
    box-shadow: 0px 0px 10px #90a4b2; 
 
    } 
 

 
    to { 
 
    box-shadow: 0px 0px 20px #337ab7; 
 
    } 
 
} 
 

 
@-moz-keyframes changeShadow{ 
 
    from { 
 
    box-shadow: 0px 0px 10px #90a4b2; 
 
    } 
 

 
    to { 
 
    box-shadow: 0px 0px 20px #337ab7; 
 
    } 
 
}

<select class="animate-box"> 
 
    <option value="volvo">Volvo</option> 
 
    <option value="saab">Saab</option> 
 
    <option value="mercedes">Mercedes</option> 
 
    <option value="audi">Audi</option> 
 
</select>

Answer 1

, CanIUse?에서 확인하십시오.

.animate-box { 
 
    height: 100%; 
 
    -webkit-animation: changeShadow 0.5s infinite alternate; 
 
    -moz-animation: changeShadow 0.5s infinite alternate; 
 
    animation: changeShadow 0.5s infinite alternate; 
 
    border: 1px solid black; 
 
} 
 
@-webkit-keyframes changeShadow { 
 
    from { box-shadow: 0 0 10px #90a4b2; } 
 
    to { box-shadow: 0 0 20px #337ab7; } 
 
} 
 

 
@-moz-keyframes changeShadow { 
 
    from { box-shadow: 0 0 10px #90a4b2; } 
 
    to { box-shadow: 0 0 20px #337ab7; } 
 
} 
 

 
@keyframes changeShadow { 
 
    from { box-shadow: 0 0 10px #90a4b2; } 
 
    to { box-shadow: 0 0 20px #337ab7; } 
 
}

<select class="animate-box"> 
 
    <option value="volvo">Volvo</option> 
 
    <option value="saab">Saab</option> 
 
    <option value="mercedes">Mercedes</option> 
 
    <option value="audi">Audi</option> 
 
</select>

Answer 2

은 내가 CSS로 애니메이션 속성을 추가하는 것을 잊었다 및 unprefix 키 프레임을 포함하는 것이 발견 :

당신은 IE10 +에 대한 CSS 애니메이션의 접두어가 속성을 추가 할 필요가

.animate-box{ 
    height: 100%; 
    -moz-animation-duration: 0.5s; 
    -webkit-animation-duration: 0.5s; 
    animation-duration: 0.5s; 
    -moz-animation-name: changeShadow; 
    -webkit-animation-name: changeShadow; 
    animation-name: changeShadow; 
    -moz-animation-iteration-count: infinite; 
    -webkit-animation-iteration-count: infinite; 
    animation-iteration-count: infinite; 
    -moz-animation-direction: alternate; 
    -webkit-animation-direction: alternate; 
    animation-direction: alternate; 
    border: 1px solid black; 
} 

@keyframes changeShadow{ 
    from { 
    box-shadow: 0px 0px 10px #90a4b2; 
    } 

    to { 
    box-shadow: 0px 0px 20px #337ab7; 
    } 
}