Question

我是CSS的新手，我开始修补我在网上找到的仅限CSS的图片幻灯片（还不知道javascript）。

它与webkit浏览器完美配合，但是当涉及IE11或Firefox时，它根本不起作用。我在这里粘贴了代码：

我的猜测是我需要为这块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/更新的小提琴（在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; }
}

您还需要在没有浏览器供应商标签的情况下定义animation。例如：

#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 */
}

我的CSS幻灯片不适用于Firefox或IE11

1 个答案: