关键帧在 IE 上不起作用答案

【问题标题】：Keyframes are not working on IE关键帧在 IE 上不起作用
【发布时间】：2016-12-14 17:03:20
【问题描述】：

我在 Stackoverflow 和网络上的任何地方都对我在 IE 上的关键帧问题进行了一些研究，但我找不到合适的答案。

我无法让下面的 CSS 代码在 IE 上运行，我不知道如何解决这个问题：

body{
  color: #444444;
  text-align: center;
  height: 100%;
  background-color: #fff;
  font-family: 'Montserrat', helvetica, arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  font-smoothing: antialiased;
  opacity: 0;
  -webkit-animation: showImg 1200ms 600ms forwards ease-out;
  -o-animation: showImg 1200ms 600ms forwards ease-out;
  -moz-animation: showImg 1200ms 600ms forwards ease-out;
  animation: showImg 1200ms 600ms forwards ease-out;
}

@keyframes showImg{
  100% {
    opacity: 1;
  }
}

@keyframes hideImg{
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

@-webkit-keyframes showImg{
  100% {
    opacity: 1;
  }
}

@-webkit-keyframes hideImg{
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

@-o-keyframes showImg{
  100% {
    opacity: 1;
  }
}

@-o-keyframes hideImg{
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

它在 Firefox 和 Chrome 上运行良好。

有没有人也遇到过这个问题？

提前一百万感谢您的帮助。

【问题讨论】：

您测试的是哪个版本的 IE？另外，您是否检查过在 IE 的兼容模式或怪癖模式下没有看到它？
我正在使用 IE 9 和 10 进行测试。
会试试IE的兼容模式。不知道它确实存在
非常感谢@Spudley
无论如何，IE9 根本不支持 CSS 动画，所以你不会在那里获得任何乐趣。 IE10 和 IE11 确实支持关键帧，但显然它在媒体查询中的任何一个中都不起作用。你可以在这里找到更多信息：caniuse.com/#search=keyframe

标签： css cross-browser css-animations compatibility keyframe

【解决方案1】：

我也有这个问题。我在@media only screen 和 (max-width: 600px) 和 (orientation: portrait) {} 中有关键帧。 @media 之外的关键帧……对我有用

【讨论】：