Firefox 6 的平滑 CSS3 过渡问题答案

【问题标题】：Smooth CSS3 transitions issues with Firefox 6Firefox 6 的平滑 CSS3 过渡问题
【发布时间】：2011-10-12 00:18:21
【问题描述】：

好的，我最初的问题是从左到右移动一个元素。我选择的框架是 jQuery，所以我使用了 animate。

这是一个简单的例子。 http://jsfiddle.net/7NYwY/3/

在 Firefox 中，动画期间在同一位置大约有 3 次“暂停”。在 Chrome 中这些不会出现。

所以我想我会进一步剥离它并使用 CSS3 过渡

http://jsfiddle.net/y6yW6/4/

我在同一个地方得到完全相同的“暂停”。我假设 jQuery 正在从我那里抽象出这些转换，所以它实际上是相同的代码。

所以问题是，我怎样才能让这个相当简单的动画在 Firefox 和 chrome 中顺利运行。

如果你想炫耀的话，jQuery 会很好，纯 JS。

【问题讨论】：

标签： javascript jquery animation css

【解决方案1】：

您没有进行 CSS3 过渡。这将在 Chrome / iOS / Android 中顺利运行：

var ele = $('#bike');

var dx = -500; // transformation
var duration = 3000; // duration in ms.
ele.css({ 
            '-webkit-transform': 'translate3d(' + -dx + 'px,0px,0px)', 
            '-webkit-transition-duration': (duration || 0) + 'ms', 
            '-webkit-backface-visibility': 'hidden', 
            '-webkit-transition-property': '-webkit-transform' 
});

Firefox 大致相同，但您可以轻松解决这个问题。

【讨论】：

嗯，在 Firefox 中看到完全相同的暂停，使用上面为 moz 制作的示例。 jsfiddle.net/mj8YU/2 使用 jQuery animate 或其他 CSS 示例的 chrome 没有问题。似乎不仅是我的机器，许多机器（linux、windows 和 mac）都有相同的暂停问题。 :(
这不是 JsFiddle 的问题吗？我现场使用相同的技术，它运行得非常顺利。你能把它放在一个单独的 HTML 文件中吗？
它在我本地机器上的普通旧 html 文件上是一样的。但是我已经升级到FF7，它还没有那么糟糕。我只需要使用 jQuery animate，因为我也需要在每一步都做一些事情。希望是最好的......