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/

动画在Mozilla中不起作用

1 个答案: