我的CSS幻灯片不能在Firefox或IE11上工作

我是新来的CSS，并开始修补我在网上找到的一个CSS图像幻灯片（还不知道JavaScript）。我的CSS幻灯片不能在Firefox或IE11上工作

它与webkit浏览器完美结合，但是当涉及到IE11或Firefox时，它根本无法工作。我在这里粘贴代码：

我的猜测是，我需要做一些FF/IE11具体的东西到这个块的CSS：

/* 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上运行（如果可能的话）。

谢谢。

来源

2014-02-28 Aaron

在我的Firefox中正常工作！（v27.0.1）您是否关闭了自动更新？ – 2014-02-28 06:12:22

@Oliver，也运行v27.0.1 ..也许在页面上的其他东西搞砸了.. – Aaron

你对浏览器供应商标签是正确的，你还需要添加官方的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 */ 
}

来源

2014-02-28 06:18:20

我的CSS幻灯片不能在Firefox或IE11上工作

回答

相关问题