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

あなたはIE10 +のCSSアニメーションのための接頭辞プロパティを追加する必要があり、 CanIUse?で確認してください。 IEで何が起こる

.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キーフレームを含める：

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