html - 关键帧在IE11中无法正常工作

Closed. This question is off-topic。它当前不接受答案。
                            
                        
                    
                
                            
                                
                
                        
                            
                        
                    
                        
                            想改善这个问题吗？ Update the question，所以它是on-topic，用于堆栈溢出。
                        
                        2年前关闭。
                                                                                            
                
        
我有一个选择框动画，其中选择框突出显示。显然，关键帧动画在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>

最佳答案

您必须为IE10 +的CSS动画添加非前缀属性，并在CanIUse?上签出。另外，您可以使用速记animation属性：

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