不適用於Mozilla的動畫

嗨這可能是一個重複的問題，如果是這樣，我很抱歉，但是我在搜索中獲得了大量的內容。不適用於Mozilla的動畫

我寫過動畫，在Chrome中運行良好，但不知何故，它在Mozilla中不起作用。高度讚賞任何人的幫助

.truck-size{ 
background: url("../img/truck-animation/truck0.png")no-repeat center center; 
height: 100px; 

    -webkit-animation: 5s linear 0s normal none infinite truck-change; 
    animation: 5s linear 0s normal none infinite truck-change; 
    -moz-animation: 5s linear 0s normal none infinite truck-change; 
    -o-animation: 5s linear 0s normal none infinite truck-change; 

} 



@-webkit-keyframes truck-change { 
    0% {background: url("../img/truck-animation/truck0.png")no-repeat center center;height: 100px;} 
    100% {background: url("../img/truck-animation/truck20.png")no-repeat center center;height: 100px;} 
} 

@keyframes truck-change { 
    0% {background: url("../img/truck-animation/truck0.png")no-repeat center center;height: 100px;} 
    100% {background: url("../img/truck-animation/truck20.png")no-repeat center center;height: 100px;} 
} 

@-moz-keyframes truck-change { 
    0% {background: url("../img/truck-animation/truck0.png")no-repeat center center;height: 100px;} 
    100% {background: url("../img/truck-animation/truck20.png")no-repeat center center;height: 100px;} 
}

來源

2015-04-28 gunj_desai

您可以設置廣告emo在jsfiddle？ –

http://jsfiddle.net/yksg35xc/ 但這個小提琴在chrome和firefox都可以使用，但是我仍然無法讓它在我的本地firefox上工作 –

動畫在背景圖像的情況下不起作用。 Firefox不支持在背景圖像之間進行插值。

這就解釋了爲什麼你的代碼在所有瀏覽器工作在的background-color情況下，爲什麼它沒有在background-image

情況參見本條目：https://bugzilla.mozilla.org/show_bug.cgi?id=1036761 和http://forums.mozillazine.org/viewtopic.php?f=25&t=2699753

CSS：

.truck-size { 
    background-color:black; 
    height: 100px; 
    -webkit-animation: 5s linear 0s normal none infinite truck-change; 
    animation: 5s linear 0s normal none infinite truck-change; 
    -moz-animation: 5s linear 0s normal none infinite truck-change; 
    -o-animation: 5s linear 0s normal none infinite truck-change; 
} 
@-webkit-keyframes truck-change { 
    0% { 
     background:red; 
     height: 100px; 
    } 
    100% { 
     background:yellow; 
     height: 100px; 
    } 
} 
@keyframes truck-change { 
    0% { 
     background-color:red; 
     height: 100px; 
    } 
    100% { 
     background:yellow; 
     height: 100px; 
    } 
} 
@-moz-keyframes truck-change { 
    0% { 
     background-color:red; 
     height: 100px; 
    } 
    100% { 
     background:yellow; 
     height: 100px; 
    } 
}

演示：http://jsfiddle.net/yksg35xc/

來源

2015-04-28 11:02:06

非常感謝你的關注。非常感謝 –

@gunj_desai沒關係:) –

不適用於Mozilla的動畫

回答

相關問題