我的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上工作

回答

相關問題