CSS3關鍵幀動畫在Mozilla Firefox中不工作

我想讓css3滑塊在設置時使用-moz-前綴用於圖像滑動滑塊甚至不能在chrome中工作更不用說Mozilla Firefox。但= webkit-前綴在Chrome中運行良好，如果我不使用-moz前綴和-webkit。即使我宣佈字幕動畫。標題動畫無效。CSS3關鍵幀動畫在Mozilla Firefox中不工作

只是對我的代碼看：http://codepen.io/faeshaan/pen/pefwq

來源

2013-07-24 Faysal Ahmed

試試這個？ http://codepen.io/anon/pen/AjoHm – dc5

我重新安排你的代碼，把正在使用它們的屬性下方的關鍵幀動畫的定義。此外，您只有-webkit-animation: ;聲明，因此我添加了mozilla，microsoft，opera和W3C兼容瀏覽器的其他聲明。

我還將animation-iteration-count: ;合併到animation: ;聲明中，因爲它在文件中保存了一些文本。

所以現在不是你有什麼之前：它看起來像這樣

.container h5 { 
    background:rgba(0,0,0,0.5); 
    position:absolute; 
    bottom:4px; 
    width:100%; 
    padding:5px; 
    color:#fff; 
    text-align:center; 
    margin-bottom:0px; 
    -webkit-animation: headings 20s; 
} 

@-webkit-keyframes headings { 
    10% { 
    margin-bottom:4px; 
    } 
    15%,30% { 
    margin-bottom:-200px; 
    } 
}

：

.container h5 { 
    background:rgba(0,0,0,0.5); 
    position:absolute; 
    bottom:4px; 
    width:100%; 
    padding:5px; 
    color:#fff; 
    text-align:center; 
    margin-bottom:0px; 
    -webkit-animation: headings 20s; 
    -moz-animation: headings 20s; 
    -ms-animation: headings 20s; 
    -o-animation: headings 20s; 
    animation: headings 20s; 
}

我添加了相應的關鍵幀定義。

最後一支筆是here。

來源

2013-07-24 20:00:55

爲您做了這項工作？ –

我發現看着你的代碼的幾個問題：

syntax for keyframes應@keframes slide{}不@keyframes 'slide' {}
幻燈片動畫是缺少一個右}
添加一個初始left:0;位置.container ul爲dc5 suggested
將特定高度200px添加到.container以使標題ani mation看起來更清潔一些。

這將在Firefox v22中正常工作，但您仍然需要添加瀏覽器前綴以獲得完整支持。

Working Example

.container { 
    width:200px; 
    height:200px; 
    margin:0px auto; 
    overflow:hidden; 
} 
.container ul { 
    width:1000px; 
    list-style:none; 
    position:relative; 
    left:0; 
    animation: slide 20s infinite; 
} 
ul, li { 
    padding:0px; 
    margin:0px; 
} 
.container ul li { 
    position:relative; 
    left:0px; 
    float:left; 
} 
.container h5 { 
    background:rgba(0, 0, 0, 0.5); 
    position:absolute; 
    bottom:4px; 
    width:100%; 
    padding:5px; 
    color:#fff; 
    text-align:center; 
    margin-bottom:0px; 
    animation: headings 4s infinite; 
} 
@keyframes slide { 
    10% { 
     left:0px; 
    } 
    15%, 30% { 
     left:-200px; 
    } 
    35%, 50% { 
     left:-400px; 
    } 
    55%, 70% { 
     left:-600px; 
    } 
    75%, 90% { 
     left:-800px; 
    } 
} 
@keyframes headings { 
    10% { 
     margin-bottom:4px; 
    } 
    25%, 50% { 
     margin-bottom:-150px; 
    } 
}

來源

2013-07-24 20:37:41 apaul

在Mozilla瀏覽器（基本上是@Ilan比亞瓦說重：CSS標記）的關鍵幀定義和CSS屬性添加動畫後仍然沒有爲我工作在OSX上的Firefox V22 。

添加一個初始：

left: 0px;

所做的動畫開始工作。似乎firefox不喜歡左邊的動畫，除非它首先在css類中明確定義。

來源

2013-07-24 20:40:12 dc5

工程很好，我用FF和IE10這個修補程序。 – 321zeno

CSS3關鍵幀動畫在Mozilla Firefox中不工作

回答

相關問題