10

我正在开发一个包含大量 jQuery 动画的迷你网站。它在 Safari、Chrome 和 IE9 中运行良好，但在 OSX 上的 Firefox（7、8 和 9）中动画效果非常不稳定。我认为 CSS 动画会更流畅，所以我调整了网站的 iPad 版本并在 Firefox 中进行了尝试。它似乎同样糟糕。

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

我真的很感激我能得到的任何帮助。在这方面，我有点走投无路。

4

3 回答 3

11

经过大量的环顾和提问后，Firefox 似乎不像其他浏览器那样处理 DOM 动画。所以看起来我只需要忍受波涛汹涌的 Firefox 动画。

于 2012-01-29T21:00:28.043 回答
9

我知道这个问题是几年前提出的，但我只是偶然发现了它，除了“firefox 很烂”之外没有真正的答案。在 Firefox 中为动画 dom 元素启用硬件加速的技巧是在平移的同时添加一个小旋转。例如：

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

它断断续续的原因是为了避免模糊 div 动画中的任何内容（尤其是文本）。虽然我个人认为这不是默认行为的正确选择，但您可以在此处查看推理。

于 2016-11-21T22:55:23.970 回答
0

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

动画有点波涛汹涌，而只是过渡。休息很好，该网站是您迄今为止所做的一项令人惊叹的工作！

于 2012-01-20T09:01:27.440 回答