css - 简单的 CSS3 关键帧动画在 Firefox 中不起作用

Question

我创建了一个简单的 CSS3 关键帧动画，用于切换元素的 bg 图像。它运行完美，但我信赖的 Firefox 却让我失望了。一开始我用的是prefix free，后来我觉得可能是这个问题，后来我手写了所有的前缀，在Firefox中仍然没有。

您可以在以下位置查看示例:http://madebym.me/test/nimbus/index.html

此外，这里是相关代码，卡车应该开关灯。

-webkit-animation: switch-truck-lights 1s linear infinite normal;
-moz-animation: switch-truck-lights 1s linear infinite normal;
-ms-animation: switch-truck-lights 1s linear infinite normal;
-o-animation: switch-truck-lights 1s linear infinite normal;
animation: switch-truck-lights 1s linear infinite normal;
}

@keyframes "switch-truck-lights" {
from {
    background-image: url(../images/truck-off.png);
}

to {
    background-image: url(../images/truck-on.png);
}
}

@-moz-keyframes switch-truck-lights {
    from {
        background-image: url(../images/truck-off.png);
    }

    to {
        background-image: url(../images/truck-on.png);
    };
}

@-webkit-keyframes "switch-truck-lights" {
    from {
        background-image: url(../images/truck-off.png);
    }

    to {
        background-image: url(../images/truck-on.png);
    };
}

@-ms-keyframes "switch-truck-lights" {
    from {
        background-image: url(../images/truck-off.png);
    }

    to {
        background-image: url(../images/truck-on.png);
    };
}

@-o-keyframes "switch-truck-lights" {
    from {
        background-image: url(../images/truck-off.png);
    }

    to {
        background-image: url(../images/truck-on.png);
    };
}

Answer 1

似乎 background-position 不是 valid transition/animation property . 出于某种原因，它在 Chrome 中工作，但唯一的其他解决方案是淡入淡出绝对定位的图像，或者为图像 Sprite 的背景位置设置动画。

这正是我所做的。