在IE中使用媒体查询时CSS动画不起作用 [英] CSS Animation not working when use Media Queries in IE

问题描述

我使用CSS动画和媒体聚会这样！

  HTML 
< div class ='block'> 
< div class ='block-bar'>< / div> 
< / div> 
 CSS 
 .block-bar {
 -webkit-animation：timebar 1s infinite; 
 -moz-animation：时间条1s无限; 
动画：时间条1s无限; 
} 
 @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中
 
 
 
如何修复它？谢谢。
解决方案
问题是，当关键帧在mediaqueries中定义时，IE不喜欢它。如果你在mediaquery之外的关键帧的定义拉动它。 （在IE11中测试） 
 
 
  @keyframes timebar {
 0％{width：0％; } 
 99％{width：100％; } 
 100％{width：0％; } 
} 
 
 @media（min-width：300px）{
 .block-bar {
 height：50px;背景颜色：红色; 
 -webkit-animation：时间条1s无限; 
 -moz-animation：时间条1s无限; 
动画：时间条1s无限; 
} 
 
 @ -webkit-keyframes timebar {
 0％{width：0％; } 
 99％{width：100％; } 
 100％{width：0; } 
} 
} 
  
 
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.
解决方案
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; }
    }
}


                        
这篇关于在IE中使用媒体查询时CSS动画不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！