Firefox中的jQuery和CSS动画Choppy

Question

我正在开发一个具有大量jQuery动画的minisite.它在Safari,Chrome和IE9中运行良好,但在OSX上的Firefox(7,8和9)中动画非常不稳定.我认为CSS动画会更顺畅,所以我改编了网站的iPad版本并在Firefox中尝试了.看起来一样糟糕.

我没有花很多时间在Firefox上,所以我不确定我在这里做错了什么.我是否需要触发GPU加速(如在Webkit中使用translateZ(0)),还是只是一直用于所有内容(如IE9？)Firefox是不是足够强大,即使使用GPU？

我真的很感激我能得到的任何帮助.我对这件事情的结论很有帮助.

Answer 1

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

Answer 2

我知道这个问题是在几年前提出的，但是我偶然发现了这个问题，除了“ Firefox糟透了”之外，没有任何真正的答案。为Firefox中的dom元素设置动画加速功能的技巧是在平移时增加一个小的旋转。例如：

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

断断续续的原因是为了避免使div内的任何动画（特别是文本）变得模糊。虽然我个人认为这不是默认行为的正确选择，但您可以在此处查看原因。