Question

我创建了一个简单的CSS3关键帧动画，用于切换元素的bg图像。它工作得很好，但我信赖的Firefox让我失望了。我最初使用前缀是免费的，然后我认为这可能是问题，之后我手工编写所有前缀，在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

背景位置似乎不是valid transition/animation property。出于某种原因，它适用于Chrome，但唯一的其他解决方案是淡入绝对定位的图像，或动画图像精灵的背景位置。

这是我所做的很好。

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

1 个答案: