Css Animation Not Working When Use Media Queries In Ie

I use CSS Animation and media queires like this! HTML

CSS .block-bar { -webkit-an

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