在IE中使用媒体查询时,CSS动画无法正常工作

Question

我使用像这样的 CSS动画和媒体队列 !

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在媒体查询中定义关键帧时不喜欢它.如果您在mediaquery之外提取关键帧的定义,则它可以正常工作.(在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; }
    }
}