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在媒体查询中定义关键帧时不喜欢它。如果您在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; }
    }
}

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

1 个答案: