Firefox 14 下的 CSS3 动画答案

【问题标题】：CSS3 Animation under Firefox 14Firefox 14 下的 CSS3 动画
【发布时间】：2012-08-03 00:38:48
【问题描述】：

以下动画有问题：

.anim {
    -moz-animation-delay: 0s;
    -moz-animation-iteration-count: infinite;
    -moz-animation-duration: 6s;
    -moz-animation-fill-mode: forwards;
    -moz-animation-name: animation_1;
    -moz-animation-play-state: running;
    -moz-animation-timing-function: linear;
    -moz-transform-origin: right top;
    background-image:url("http://jsfiddle.net/css/../img/logo.png");    
    height:25px;
    width:  160px;
    z-index: 1;
    position: absolute;

}

.container {
    left: 100px;
    top: 100px;
    position: absolute;
}

@-moz-keyframes animation_1 {
    0% {
        opacity: 1;
        left:29.45px;
        top:0;
        -moz-transform: rotate(0deg) scale(2,2);
    }

    100% {
        top:0;
        opacity: 0.5;
        left:120px;
        top:120px;
        -moz-transform: rotate(90deg) scale(0.5,0.5);
    }
}

你可以在这里看到小提琴：http://jsfiddle.net/QTeXG/5/

嗯，同样的动画在 Chrome 21 上运行正常：http://jsfiddle.net/P2dKE/

如果我： - 从 Firefox 中的动画中删除不透明度，它开始正常工作。 - 删除背景图像并使用背景颜色，它也开始正常工作。

在 Ubuntu 12.04、Firefox 14.0.1 和 Chrome 21.0.1180.57 下测试。

有什么想法吗？

【问题讨论】：

您的 jsFiddle 在 Windows Vista 上的 Firefox 14.0.1 中为我工作。
是的，如果我使用带有 -webkit- 的代码并将所有 -webkit- 替换为 -moz- 在 Firefox 中可以正常工作，效果与在 Chrome 中相同。我在 Windows 上，也许是 Ubuntu 上 ff 的一些错误
是的，这似乎是 Ubuntu 和 MacOS 中的一个错误，在 Windows 中运行正常，感谢您的反馈！
我已经在 Firefox 15 (beta) 中测试过这个问题，但我无法重现这个问题....它似乎在 Firefox 15 中得到了修复。

标签： html firefox css css-animations

【解决方案1】：

这已在 Firefox 的 >= 15 版本中得到解决。

【讨论】：