html - 动画在 Mozilla 中不起作用

Question

您好，这可能是一个重复的问题，如果是这样，我很抱歉，但我的搜索得到了任何实质性的东西。

我写过动画，它在 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;}
}

Answer 1

动画不适用于背景图像。 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/