关键帧在 IE11 中无法正常工作 [关闭]答案

【问题标题】：Keyframes don't work correctly in IE11 [closed]关键帧在 IE11 中无法正常工作 [关闭]
【发布时间】：2017-03-23 19:08:05
【问题描述】：

我有一个选择框动画，其中选择框被突出显示。显然，关键帧动画在 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>

【问题讨论】：

在 IE 中会发生什么？ It seems to be supported.
我的错，我忘了给css添加动画属性。关闭这个问题

标签： html css css-animations internet-explorer-11

【解决方案1】：

您必须为 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>

【讨论】：

感谢谢尔盖杰尼索夫

【解决方案2】：

我发现我忘记在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;
  }
}

【讨论】：

您还需要包含不带前缀的keyframes。顺便说一句，您可以在此处使用animation shorthand 来减少所需的代码量：animation:changeShadow .5s infinite alternate;。
感谢您的快速回复