IE10/Win 7 在媒体查询中忽略 CSS 关键帧？答案

【问题标题】：IE10/Win 7 ignores CSS keyframes when within a media query?IE10/Win 7 在媒体查询中忽略 CSS 关键帧？
【发布时间】：2013-07-23 22:27:41
【问题描述】：

0我正在为具有响应式布局的 Web 应用程序制作一些 CSS 动画。我的一些动画调整了一些容器的宽度和背景图像的位置。结果我有这样的东西（为简洁起见省略了前缀）：

/* Default styles */

.box { animation: grow 1s ease; }

keyframes grow {
    0% {
        width: 100px;
    }
    100% {
        width: 200px;
    }
}

/* Large display styles */

@media (min-width: 1200px){

   keyframes grow {
       0% {
          width: 200px;
       }
       100% {
           width: 300px;
       }
   }

}

根据CSS Tricks 上的这篇文章，Win7 上的 IE10 会忽略媒体查询中的关键帧。我已经测试了这个理论，发现它是正确的。

有人找到解决方法吗？

【问题讨论】：

标签： internet-explorer css css-animations

【解决方案1】：

像下面这样重新组织代码怎么样？

.box { animation: grow 1s ease; }

@keyframes grow {
    0% {
        width: 100px;
    }
    100% {
        width: 200px;
    }
}

@keyframes growLarge {
    0% {
        width: 200px;
    }
    100% {
        width: 300px;
    }
}

/* Large display styles */

@media (min-width: 1200px){

   .box { animation: growLarge 1s ease; }

}

【讨论】：

恕我直言，这将是处理它的最佳方式。
这是我最初的解决方案。我喜欢它，因为它都是 CSS，但考虑到我必须复制的动画数量，它确实意味着很多额外的 CSS。可能是最好的方法！

【解决方案2】：

我会为此使用 Javascript。这是一些伪代码，不确定它在IE中是否有效：

if (screen.width > 1200) {

   // Large display styles

  var grow = 'keyframes grow { 0% { width: 100px; } 100% { width: 200px; } }',
      head = document.getElementsByTagName('head')[0],
      style = document.createElement('style');

    style.type = 'text/css';
    style.appendChild(document.createTextNode(grow));

}

因此，在 Javascript 中检测大于 1200 的屏幕尺寸并添加新样式。此外，如果您知道关键帧会增长样式表索引和规则索引，则可以通过 CSSOM 对其进行修改。

【讨论】：

【解决方案3】：

在媒体查询之外使用.box { transition: all 1s ease } 会起作用吗？然后只需使用媒体查询更改宽度

【讨论】：