因此,我正在尝试使此幻灯片在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; }
}

最佳答案

动画似乎只对我有用,这是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; }
}

10-05 20:56
查看更多