不适用于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的动画

回答

相关问题