CSS 3 幻灯片不显示在 IE10 中答案

【问题标题】：CSS 3 slideshow not displaying in IE10CSS 3 幻灯片不显示在 IE10 中
【发布时间】：2013-05-23 08:13:35
【问题描述】：

所以我试图让这个幻灯片在 IE10 中工作。根据 W3Schools 的说法，IE 支持这种语法，但尽管它在所有其他浏览器上都可以正常工作，但 IE 就是不配合。
我将不胜感激有关此事的任何提示... 代码如下所示：

#image li.firstanimation {
    -moz-animation:anim 75s linear infinite;    
    -webkit-animation:anim 75s linear infinite;
    animation:anim 75s linear infinite;
}
#image li.secondanimation {
    -moz-animation:animtwo 75s linear infinite;
    -webkit-animation:animtwo 75s linear infinite;
    animation:anim 75s linear infinite;
}
#image li.thirdanimation {
    -moz-animation:animthree 75s linear infinite;
    -webkit-animation:animthree 75s linear infinite;
    animation:anim 75s linear infinite;
}
#image li.fourthanimation {
    -moz-animation:animfour 75s linear infinite;
    -webkit-animation:animfour 75s linear infinite;
    animation:anim 75s linear infinite;
}
#image li.fifthanimation {
    -moz-animation:animfive 75s linear infinite;
    -webkit-animation:animfive 75s linear infinite;     
    animation:anim 75s linear infinite;
}
#image li.sixthanimation {
    -moz-animation:animsix 75s linear infinite;
    -webkit-animation:animsix 75s linear infinite;      
    animation:anim 75s linear infinite;
}
#image li.seventhanimation {
    -moz-animation:animseven 75s linear infinite;
    -webkit-animation:animseven 75s linear infinite;        
    animation:anim 75s linear infinite;
}
#image li.eighthanimation {
    -moz-animation:animeight 75s linear infinite;
    -webkit-animation:animeight 75s linear infinite;        
    animation:anim 75s linear infinite;
}
#image li.ninthanimation {
    -moz-animation:animnine 75s linear infinite;
    -webkit-animation:animnine 75s linear infinite;     
    animation:anim 75s linear infinite;
}

@keyframes anim {
    0%  { top:0px; }
    1%  { top:0px; } 
    9% { top:0px; opacity:1; z-index:0; } 
    11% { top:325px; opacity:0; z-index:0; } 
    12% { top:-325px; opacity:0; z-index:-1; }
    97% { top:-325px; opacity:0; z-index:0; }
    98% { top:-325px; opacity:0; }
    100%{ top:0px; opacity:1; }

}
@keyframes animtwo {
    0%  { top:-325px; opacity:0; }
    9% { top:-325px; opacity:0; }
    11% { top:0px; opacity:1; }
    12% { top:0px; opacity:1; } 
    20% { top:0px; opacity:1; z-index:0; } 
    22% { top:325px; opacity:0; z-index:0; }
    23% { top:-325px; opacity:0; z-index:-1; } 
    100%{ top:-325px; opacity:0; z-index:-1; }
}
@keyframes animthree {
    0%  { top:-325px; opacity:0; }
    20% { top:-325px; opacity:0; }
    22% { top:0px; opacity:1; }
    23% { top:0px; opacity:1; } 
    31% { top:0px; opacity:1; } 
    33% { top:325px; opacity:0; z-index:0; }
    34% { top:-325px; opacity:0; z-index:-1; } 
    100%{ top:-325px; opacity:0; z-index:-1; }
}
@keyframes animfour {
    0%  { top:-325px; opacity:0; }
    31% { top:-325px; opacity:0; }
    33% { top:0px; opacity:1; }
    34% { top:0px; opacity:1; }
    42% { top:0px; opacity:1; z-index:0; }
    44% { top:325px; opacity:0; z-index:0; }
    45% { top:-325px; opacity:0; z-index:-1; }
    100%{ top:-325px; opacity:0; z-index:-1; }
}
@keyframes animfive {
    0%  { top:-325px; opacity:0; }
    42% { top:-325px; opacity:0; }
    44% { top:0px; opacity:1; }
    45% { top:0px; opacity:1; }
    53% { top:0px; opacity:1; z-index:0; }
    55% { top:325px; opacity:0; z-index:0; }
    56% { top:-325px; opacity:0; z-index:-1; }
    100%{ top:-325px; opacity:0; z-index:-1; }
}
@keyframes animsix {
    0%  { top:-325px; opacity:0; }
    53% { top:-325px; opacity:0; }
    55% { top:0px; opacity:1; }
    56% { top:0px; opacity:1; }
    64% { top:0px; opacity:1; z-index:0; }
    66% { top:325px; opacity:0; z-index:0; }
    67% { top:-325px; opacity:0; z-index:-1; }
    100%{ top:-325px; opacity:0; z-index:-1; }
}
@keyframes animseven {
    0%  { top:-325px; opacity:0; }
    64% { top:-325px; opacity:0; }
    66% { top:0px; opacity:1; }
    67% { top:0px; opacity:1; }
    75% { top:0px; opacity:1; z-index:0; }
    77% { top:325px; opacity:0; z-index:0; }
    78% { top:-325px; opacity:0; z-index:-1; }
    100%{ top:-325px; opacity:0; z-index:-1; }
}
@keyframes animeight {
    0%  { top:-325px; opacity:0; }
    75% { top:-325px; opacity:0; }
    77% { top:0px; opacity:1; }
    78% { top:0px; opacity:1; }
    86% { top:0px; opacity:1; z-index:0; }
    88% { top:325px; opacity:0; z-index:0; }
    89% { top:-325px; opacity:0; z-index:-1; }
    100%{ top:-325px; opacity:0; z-index:-1; }
}
@keyframes animnine {
    0%  { top:-325px; opacity:0; }
    86% { top:-325px; opacity:0; }
    88% { top:0px; opacity:1; }
    89% { top:0px; opacity:1; }
    98% { top:0px; opacity:1; z-index:0; }
    100%{ top:325px; opacity:0; z-index:0; }
}

【问题讨论】：

嗯，你的第一个问题是你听了 W3CSchools 对某事所说的话。 W3C Schools 不是官方支持的网站，并且充满了错误信息和不准确之处。不要将它们用作信息来源。而是看这里：caniuse.com/#feat=css-animation
是所有的相关代码吗？ IE 10 没有 need the -ms 前缀，因此您的代码应该可以正常工作。如果这不是您的代码的全部，请发布其余部分。
您能否为您的问题设置一个jsfiddle.net，以便我们进行更好的测试？

标签： css slideshow internet-explorer-10 css-animations

【解决方案1】：

动画似乎只适合我，这是 jsfiddle：http://jsfiddle.net/yjsxp/

HTML：

<ul id="image">
    <li class="firstanimation">
     ...
    </li>
</ul>

CSS：

#image { position: relative;}
#image li{
    position:absolute;
    background-color:red;
}
#image li.firstanimation {
    -moz-animation:anim 75s linear infinite;    
    -webkit-animation:anim 75s linear infinite;
    animation:anim 75s linear infinite;

}
@keyframes anim {
    0%  { top:0px; }
    1%  { top:0px; } 
    9% { top:0px; opacity:1; z-index:0; } 
    11% { top:325px; opacity:0; z-index:0; } 
    12% { top:-325px; opacity:0; z-index:-1; }
    97% { top:-325px; opacity:0; z-index:0; }
    98% { top:-325px; opacity:0; }
    100%{ top:0px; opacity:1; }
}

【讨论】：