css - 我的 CSS 幻灯片无法在 Firefox 或 IE11 上运行

Question

我是 CSS 的新手，我开始修改我在网上找到的纯 CSS 图像幻灯片(还不知道 javascript)。

它在 webkit 浏览器上完美运行，但是当涉及到 IE11 或 Firefox 时，它根本无法运行。我把代码贴在这里:

http://jsfiddle.net/Ye6Lv/1/

我的猜测是我需要对这段 CSS 做一些 FF/IE11 特定的事情:

/* ANIMATION */
@-moz-keyframes cycle {
    0%  { top:0px; }
    4%  { top:0px; } 
    16% { top:0px; opacity:1; z-index:0; } 
    20% { top:450px; opacity:0; z-index:0; } 
    21% { top:-450px; opacity:0; z-index:-1; }
    92% { top:-450px; opacity:0; z-index:0; }
    96% { top:-450px; opacity:0; }
    100%{ top:0px; opacity:1; }
}

如果有人可以告诉我如何让它在 FF/IE11 上运行(如果可能)。

谢谢。

Answer 1

您对浏览器供应商标签的看法是正确的，您还需要添加官方 CSS 实现 @keyframes(IE 只会听这个)。

这是用代码 http://jsfiddle.net/Ye6Lv/3/ 更新的 fiddle (在 IE11 中测试工作)

例如:

/* ANIMATION */
@-moz-keyframes cycle {
    0%  { top:0px; }
    4%  { top:0px; } 
    16% { top:0px; opacity:1; z-index:0; } 
    20% { top:450px; opacity:0; z-index:0; } 
    21% { top:-450px; opacity:0; z-index:-1; }
    92% { top:-450px; opacity:0; z-index:0; }
    96% { top:-450px; opacity:0; }
    100%{ top:0px; opacity:1; }
}
@-webkit-keyframes cycle {
    0%  { top:0px; }
    4%  { top:0px; } 
    16% { top:0px; opacity:1; z-index:0; } 
    20% { top:450px; opacity:0; z-index:0; } 
    21% { top:-450px; opacity:0; z-index:-1; }
    92% { top:-450px; opacity:0; z-index:0; }
    96% { top:-450px; opacity:0; }
    100%{ top:0px; opacity:1; }
}
@keyframes cycle {
    0%  { top:0px; }
    4%  { top:0px; } 
    16% { top:0px; opacity:1; z-index:0; } 
    20% { top:450px; opacity:0; z-index:0; } 
    21% { top:-450px; opacity:0; z-index:-1; }
    92% { top:-450px; opacity:0; z-index:0; }
    96% { top:-450px; opacity:0; }
    100%{ top:0px; opacity:1; }
}

并且您还需要定义不带浏览器供应商标签的动画。例如:

#slider li.fourthanimation {
    -moz-animation:cyclefour 75s linear infinite;
    -webkit-animation:cyclefour 75s linear infinite;
    animation:cyclefour 75s linear infinite; /* Define the CSS without browser vendor tag */
}