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 に答える