0

我创建了一个简单的 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);
    };
}
4

1 回答 1

0

似乎背景位置不是有效的过渡/动画属性。出于某种原因，它可以在 Chrome 中使用，但唯一的其他解决方案是淡入淡出绝对定位的图像，或者为图像精灵的背景位置设置动画。

这正是我所做的。

于 2013-07-26T12:03:29.570 回答