html - 动画在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;}
}

最佳答案

动画在背景图像的情况下不起作用。 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/

关于html - 动画在Mozilla中不起作用，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/29916322/