@keyframes在Firefox中不起作用

嗯，喂。我正在玩CSS3的@keyframes屬性，並且動畫在Firefox中似乎不起作用。有人可以告訴我我的代碼有什麼問題嗎？@keyframes在Firefox中不起作用

謝謝！

#slideshow{ 
    height : 150px; 
    width : 190px; 
    animation:slideshow 21s infinite; 
    -webkit-animation:slideshow 21s infinite; 
    -moz-animation:slideshow 21s infinite; 
} 



@keyframes slideshow{ 
    0% {background : url('1.jpg');} 
    14% {background : url('2.jpg');} 
    28% {background : url('3.jpg');} 
    42% {background : url('4.jpg');} 
    56% {background : url('5.jpg');} 
    70% {background : url('6.jpg');} 
    84% {background : url('7.jpg');} 
    100% {background : url('1.jpg');} 
} 

@-webkit-keyframes slideshow{ 
    0% {background : url('1.jpg');} 
    14% {background : url('2.jpg');} 
    28% {background : url('3.jpg');} 
    42% {background : url('4.jpg');} 
    56% {background : url('5.jpg');} 
    70% {background : url('6.jpg');} 
    84% {background : url('7.jpg');} 
    100% {background : url('1.jpg');} 
} 

@-moz-keyframes slideshow{ 
    0% {background : url('1.jpg');} 
    14% {background : url('2.jpg');} 
    28% {background : url('3.jpg');} 
    42% {background : url('4.jpg');} 
    56% {background : url('5.jpg');} 
    70% {background : url('6.jpg');} 
    84% {background : url('7.jpg');} 
    100% {background : url('1.jpg');} 
}

此外，動畫在Chrome中完美運行。

來源

2013-07-10 Yolo Submarine

您是否嘗試進入Firefox的工具菜單並查看錯誤控制檯並查看是否有任何與CSS相關的警告/錯誤？ –

發佈一個jsfiddle供大家點擊！ –

這不起作用，因爲您聲明瞭錯誤的屬性。

你需要的Firefox聲明只是animation。只有Chrome和Safari需要使用-webkit-前綴才能實現此CSS3效果。

所以，你的代碼是：

-webkit-animation:slideshow 21s infinite; 

animation:slideshow 21s infinite;

http://www.w3schools.com/css3/css3_animations.asp

來源

2013-07-10 17:18:04

據Mozilla雖然@keyframes支持它是目前不穩定，語法應該是什麼樣子，你已經有了，但工作動畫他們在這裏提供似乎避免使用簡寫來定義動畫屬性，並且它不使用-moz-animation前綴，而是僅使用@ -moz-keyframes並調用常規的「動畫」屬性;

https://developer.mozilla.org/samples/cssref/animations/cssanim1.html

他們的CSS是這樣的：

h1 { 
    animation-duration: 3s; 
    animation-name: slidein; 
} 

@-moz-keyframes slidein { 
0% { 
    margin-left: 100%; 
    width: 300%; 
} 

100% { 
    margin-left: 0; 
    width: 100%; 
} 
}

也許你應該嘗試

#slideshow { 
animation-name:slideshow; 
animation-duration:5s; 
animation-iteration-count:infinite; 
}

來源

2013-11-18 14:42:54 Saige

嘗試增加背景：網址（ '1.JPG'）;到#slideshow元素CSS來初始建立它。這總是爲我解決這個問題。 Firefox似乎需要一個特定的起點。

#slideshow{ 
background: url('1.jpg'); 
height : 150px; 
width : 190px; 
animation:slideshow 21s infinite; 
-webkit-animation:slideshow 21s infinite; 
-moz-animation:slideshow 21s infinite; 
}

來源

2014-12-09 00:19:26 matt127

@keyframes在Firefox中不起作用

回答

相關問題