简单的CSS3关键帧动画不'；我不能在Firefox中工作

我创建了一个简单的CSS3关键帧动画，用于切换元素的bg图像。 它工作得很好，但是我信任的Firefox让我失望了。起初我使用的是无前缀，后来我认为这可能是问题所在，之后我手工编写了所有前缀，在Firefox中仍然没有任何前缀

您可以在以下位置看到示例：

此外，这是相关代码，卡车应打开和关闭车灯

-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);
    };
}

---

背景位置似乎不是一个好的选择。 出于某种原因，它可以在Chrome中工作，但唯一的其他解决方案是淡入淡出绝对定位的图像，或者为图像精灵的背景位置设置动画

---

这正是我所做的。

此外，我现在看到它在IE10和Windows上的Safari中失败了。我可以创建一个精灵，然后设置bg位置的动画，但我真的很好奇为什么这在Chrome浏览器中有效而在其他浏览器中无效。这再简单不过了，最简单的就是更新你的Firefox浏览器。事实上，你的网站在Firefox22.0和chrome中运行得非常好。在Firefox22和IE10中运行也很好抱歉，伙计们，之前没有更新这个问题。它可以工作，因为我正在为精灵图像的背景位置设置动画。背景图像似乎不是有效的CSS转换/动画属性。由于某些原因，只有Chrome可以设置背景位置的动画。