Css动画无法在Internet Explorer 11版本中运行。 所有其他浏览器都非常好用。这是一个网站:http://susannahpryce.esy.es
我在IE中查看了firebug,它没有错误地读取代码,所以我不知道它为什么不工作,我使用的是IE 11。
这是我的代码
body .main .header-box {
background-color: #fff;
height: 500px;
width: 100%;
float: left; }
body .main .header-box .slide-area {
margin: 0 9%; }
body .main .header-box .slide-area #pic1 {
position: absolute;
z-index: 5;
-webkit-animation-duration: 60s;
-webkit-animation-delay: 10s;
-webkit-transition-timing-function: ease;
-webkit-animation-name: slide-fade;
-webkit-animation-iteration-count: infinite;
-ms-animation-duration: 60s;
-ms-animation-delay: 10s;
-ms-transition-timing-function: ease;
-ms-animation-name: slide-fade;
-ms-animation-iteration-count: infinite;
-moz-animation-duration: 60s;
-moz-animation-delay: 10s;
-moz-transition-timing-function: ease;
-moz-animation-name: slide-fade;
-moz-animation-iteration-count: infinite; }
body .main .header-box .slide-area #pic2 {
position: absolute;
z-index: 4;
-webkit-animation-duration: 60s;
-webkit-animation-delay: 20s;
-webkit-transition-timing-function: ease;
-webkit-animation-name: slide-fade;
-webkit-animation-iteration-count: infinite;
-ms-animation-duration: 60s;
-ms-animation-delay: 20s;
-ms-transition-timing-function: ease;
-ms-animation-name: slide-fade;
-ms-animation-iteration-count: infinite;
-moz-animation-duration: 60s;
-moz-animation-delay: 20s;
-moz-transition-timing-function: ease;
-moz-animation-name: slide-fade;
-moz-animation-iteration-count: infinite; }
body .main .header-box .slide-area #pic3 {
position: absolute;
z-index: 3;
-webkit-animation-duration: 60s;
-webkit-animation-delay: 30s;
-webkit-transition-timing-function: ease;
-webkit-animation-name: slide-fade;
-webkit-animation-iteration-count: infinite;
-ms-animation-duration: 60s;
-ms-animation-delay: 30s;
-ms-transition-timing-function: ease;
-ms-animation-name: slide-fade;
-ms-animation-iteration-count: infinite;
-moz-animation-duration: 60s;
-moz-animation-delay: 30s;
-moz-transition-timing-function: ease;
-moz-animation-name: slide-fade;
-moz-animation-iteration-count: infinite; }
body .main .header-box .slide-area #pic4 {
position: relative;
z-index: 2; }
@-webkit-keyframes slide-fade {
0% {
opacity: 1; }
5% {
opacity: 0; }
50% {
opacity: 0; }
55% {
opacity: 1; }
100% {
opacity: 1; } }
@-ms-keyframes slide-fade {
0% {
opacity: 1; }
5% {
opacity: 0; }
50% {
opacity: 0; }
55% {
opacity: 1; }
100% {
opacity: 1; } }
@-moz-keyframes slide-fade {
0% {
opacity: 1; }
5% {
opacity: 0; }
50% {
opacity: 0; }
55% {
opacity: 1; }
100% {
opacity: 1; } }
答案 0 :(得分:2)
从媒体查询中取出动画css。我做了一个简单的复制和粘贴,并编辑了一点点css使其工作。如此处所述[{3}}(感谢Paulie_D)在已知问题标签
中IE10和IE11不支持媒体查询中的CSS动画。
http://caniuse.com/#search=css-animation
<div class="header-box">
<div class="slide-area">
<img id="pic1" src="http://susannahpryce.esy.es/wp-content/themes/sue/pics/hq-1-optimized.jpg" />
<img id="pic2" src="http://susannahpryce.esy.es/wp-content/themes/sue/pics/hq-2-optimized.jpg" />
<img id="pic3" src="http://susannahpryce.esy.es/wp-content/themes/sue/pics/hq-3-optimized.jpg" />
<img id="pic4" src="http://susannahpryce.esy.es/wp-content/themes/sue/pics/hq-4-optimized.jpg" />
</div>
<div class="slide-area_480">
</div>
<div class="slide-area_640">
</div>
</div>
您还应该将正常的css规则放在文件中,就像没有前缀一样。现代浏览器不应该需要前缀,并且在将来,前缀应该在某个时候消失...对于这个动画的东西无论如何
答案 1 :(得分:1)
历史上,IE并没有将几种风格应用于不适用的元素 &#34;有布局。&#34;
Here是一个有关IE中不透明度的问题。