Question

我正在研究一个具有大量jQuery动画的minisite。它适用于Safari，Chrome和＆amp; IE9，但OSX上的Firefox（7,8和9）中的动画真的很不稳定。我认为CSS动画会更顺畅，所以我adapted该网站的iPad版本并在Firefox中尝试过。这看起来一样糟糕。

我没有花很多时间在Firefox上，所以我不确定我在这里做错了什么。我是否需要触发GPU加速（如在Webkit中使用translateZ（0）），或者它是否一直用于所有内容（如IE9？）即使使用GPU，Firefox也不够强大吗？

我真的很感激我能得到任何帮助。我对此非常感兴趣。

Answer 1

经过大量的环顾四周并提出问题后，似乎Firefox并不像其他浏览器那样处理DOM动画。所以看起来我只需要使用不稳定的Firefox动画。

Answer 2

我知道这个问题是在几年前被问到的，但我偶然发现它并没有真正的答案，除了'火狐糟透了'。启用硬件加速以在firefox中为dom元素设置动画的技巧是在您的翻译中添加一个小旋转。例如：

@keyframes square-animation {
    0%, 100% {
        transform: translate(600px, 160px) rotate(0.01deg);
    }
    50% {
        transform: translate(355px, 160px) rotate(0.01deg);
    }
}

它不稳定的原因是为了避免模糊div内的任何动画（特别是文本）。虽然我个人认为这不是默认行为的正确选择，但您可以看到推理here。

Answer 3

我注意到当firefox被窗口化时，动画不会断断续续，我在Win 7 x32上。他们的工作非常顺利。

动画有点不稳定，而只有tranisitions。休息很好＆amp;那个网站是一个惊人的＆amp;到目前为止你做过的惊人工作！

Firefox中的jQuery和CSS动画Choppy

3 个答案: