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

0我正在为具有响应式布局的Web应用程序开发一些CSS动画。我的一些动画调整了一些容器的宽度和背景图像的位置。因此，我有这样的事情（略去了前缀）：IE10/Win 7在媒体查询中忽略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，IE10 Win7上忽略内媒体查询关键帧。我测试了这个理论，发现它是真实的。

任何人都找到了解决方法吗？

来源

2013-07-10 Steph

如何重组代码如下？

.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; } 

}

来源

2013-07-10 17:07:50

这将是处理它恕我直言的最佳方式。 – Mircea

这是我最初的解决方案。我喜欢它，因为它全部是CSS，但是由于我必须复制动画的数量，它确实意味着很多额外的CSS。可能是最好的方法！ – Steph

我会为此使用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)); 

}

所以，检测屏幕尺寸更大然后1200 Javascript和追加新的风格。另外如果你知道你的关键帧增长样式表索引和规则索引，你可以通过CSSOM修改它。

来源

2013-07-10 16:56:03 Mircea

会使用.box { transition: all 1s ease }以外的媒体查询工作？然后只是改变媒体查询的宽度

来源

2013-07-10 17:09:29

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

回答

相关问题