CSS Animation not working when use Media Queries in IE

Question

I use CSS Animation and media queires 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; }
    }
}

it work correctly in Chrome and Firefox but not working in IE

How to fix it? Thank you.

Answer 1

The problem is that IE doesn't like it when keyframes are defined within mediaqueries. If you pull the definition for the keyframes outside the mediaquery it works. (Tested in 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; }
    }
}