Question

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

Answer 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; }
}

IE 3幻灯片显示不在IE10中显示

1 个答案: