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