0

所以我试图让这个幻灯片在 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; }
}
4

1 回答 1

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; }
}
于 2013-05-23T00:13:35.473 回答