Keyframes funktionieren nicht korrekt in IE11

Question

Ich habe eine Auswahlbox Animation, wo das Auswahlfeld hervorgehoben wird. Offensichtlich funktioniert die Keyframes-Animation in Chrome ordnungsgemäß, funktioniert aber in IE11 nicht ordnungsgemäß. Ich würde gerne wissen, was ich im Code ändern sollte, damit es auch in IE11 funktioniert.

.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

Sie müssen hinzufügen, um die ohne Präfix Eigenschaften für CSS-Animation für IE10 +, schau es dir an unter CanIUse?. Auch könnten Sie Stenografie animation Eigenschaft:

.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

Ich fand heraus, dass ich vergessen Animationseigenschaft CSS und umfassen unprefix Keyframes hinzuzufügen:

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