html - 在 IE 中使用媒体查询时 CSS 动画不起作用

Question

我使用 CSS 动画和媒体查询 like this!

HTML
<div class='block'>
    <div class='block-bar'></div>
</div>
CSS
    .block-bar {
        -webkit-animation: timebar 1s infinite;
        -moz-animation: timebar 1s infinite;
        animation: timebar 1s infinite;
    }
    @keyframes timebar {
        0% { width: 0%; }
        99% { width: 100%; }
        100% { width: 0%; }
    }
   @-webkit-keyframes timebar {
        0% { width: 0%; }
        99% { width: 100%; }
        100% { width: 0; }
    }
}

它在 Chrome 和 Firefox 中正常工作但在 IE 中不工作

如何解决？谢谢。

Answer 1

问题是 IE 不喜欢在媒体查询中定义关键帧。如果您将关键帧的定义拉到媒体查询之外，它就可以工作。 (在IE11中测试)

@keyframes timebar {
    0% { width: 0%; }
    99% { width: 100%; }
    100% { width: 0%; }
}

@media(min-width: 300px){  
    .block-bar {
        height: 50px; background-color: red;
        -webkit-animation: timebar 1s infinite;
        -moz-animation: timebar 1s infinite;
        animation: timebar 1s infinite;
    }

    @-webkit-keyframes timebar {
        0% { width: 0%; }
        99% { width: 100%; }
        100% { width: 0; }
    }
}