记录了Firefox / jQuery / CSS动画的错误？
我正在编写一个使用jquery来切换CSS类的网站，这些类运行CSS动画。
在Google Chrome和Internet Explorer 9/10中，一切都运行良好，在Firefox（Aurora 24和Firefox 23）上不会执行动画，但其余的都可以使用。
因此，例如，如果我单击一个应该隐藏一个框并显示另一个框的按钮，则在Chrome上执行平滑过渡动画，在Firefox上执行没有平滑过渡。
奇怪的是，如果我通过控制台更改应该设置动画的CSS值，则动画可以正常工作。
该网站有大约10个同时运行的动画，但只有5个正常运行。
试图禁用最后（和较重）3动画可以解决问题。 所以也许这是一种不适合Firefox管理的超载……？
我不能提供一个JSFiddle，因为当我写一个它工作，所以不可能显示问题…
这是导致问题的代码部分：
console.log("3D Accelerated animation"); console.log("oldpage = "+oldpage+"\npage = "+page+"\nnewpage = "+newpage); if(oldpage != newpage) eoldpage.removeClass("active"); $(".slider > li").attr("style", "").removeClass("animation"); epage.css({"transform": "translate3d(0, 0, 0)"}); enewpage .css({"transform": "translate3d(" + pagew * db + "px, 0, 0)"}) .addClass("active"); eboth.addClass("animation"); enewpage.children("section").load('/pages/' + newpage + ".php?lang=" + lang, function() { var hmorpher = enewpage.children().height(); $("#heightmorpher").css({"height": hmorpher}); $(".parallax").css({"height": Math.pow(hmorpher + 200, 600)}); epage.css({"transform": "translate3d(" + (pagew * da * 2) +"px, 0px, 0px)"}); enewpage.css({"transform": "translate3d(0px, 0px, 0px)"}); $("body").removeClass("active"); }); 我知道没有一个有效的例子就不容易理解。
简而言之，这部分代码生成的动画是一种页面滑块，当前页面向左或向右滑动（取决于菜单中相对于新被调用页面的位置），新页面滑动在同一时间从相反的方向。
我使用这个插件： https ： //github.com/zachstronaut/jquery-css-transform来动画所有浏览器的变换。
所以我在这里只是想问一下是否有人知道Firefox有这种行为的错误。
。
编辑：
这里是该页面的现场演示： http ： //demo.mywebexpression.com/customers/pelplastic/
这有点儿马车，因为我用“保存页面…”导出它，顺便点击第一次点击我！ 菜单项，然后尝试在两个CLICK ME菜单项之间切换。
谁来谈论供应商前缀：
这个小提琴向您显示Firefox支持非前缀版本，因此问题不是供应商前缀：
http://jsfiddle.net/3wM2V/1/
我相信问题是你使用CSS3规则-webkit-tranform这只涵盖“webkit”浏览器。
相反，您需要设置所有特定于浏览器的规则：
-webkit-transform: translate3d(0px, 0px, 0px); /* Chrome, Safari 3.1+ */ -moz-transform: translate3d(0px, 0px, 0px); /* Firefox 3.5-15 */ -ms-transform: translate3d(0px, 0px, 0px); /* IE 9 */ -o-transform: translate3d(0px, 0px, 0px); /* Opera 10.50-12.00 */ transform: translate3d(0px, 0px, 0px); /* Firefox 16+, IE 10+, Opera 12.10+ */
这个网站http://css3please.com/会有很多帮助，它会生成带有浏览器特定名称的css3。
希望有所帮助:)