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

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

<分区>

关闭。这个问题是not reproducible or was caused by typos .它目前不接受答案。

这个问题是由于错别字或无法再重现的问题引起的。虽然类似的问题可能是on-topic在这里，这个问题的解决方式不太可能帮助 future 的读者。

关闭 6 年前。

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

关于html - 关键帧在 IE11 中无法正常工作，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/42972272/

上一篇：css - LESS选择器: how to apply styling only for one of the elements from inside mixin?

下一篇：html - Unicode 不同大小的箭头

相关文章：

html - Google map 未显示在 "row"类中

javascript - 仅滚动正文文档中的选定内容

html - 我如何将我的@keyframes 动画应用到我的背景？

javascript - 使用 useEffect 操作 DOM 事件在不同屏幕上不响应

css - iPad Safari CSS3 动画计时错误

javascript - 在一个占位符中附加两个输入占位符

javascript - HTML5 2 音频标签

php - 将 HTML 存储在数据库 codeigniter 中

html - 响应式设计中 <ul> <li> 中元素之间的空间

css - Chrome 在将图形元素添加到 flexbox 时缩小它们