关键帧在 IE 上不起作用

Posted 2023-03-06

【中文标题】关键帧在 IE 上不起作用

【英文标题】：Keyframes are not working on IE

【发布时间】：2016-12-14 17:03:20

【问题描述】：

我在 *** 和网络上的任何地方都对我在 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

【参考方案1】：

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