多个过渡属性在 Firefox 中不起作用答案

【问题标题】：Multiple transition properties not working in Firefox多个过渡属性在 Firefox 中不起作用
【发布时间】：2013-02-28 04:03:17
【问题描述】：

我使用这个 CSS 已经有一段时间了，突然间我注意到它在新版本的 Firfox 中不起作用。

-moz-transition: all .3s, top 0s, left 0s;

所以最初的想法是不透明度和缩放变换会动画，而顶部和左侧不会动画。我知道使用“opacity .3s”会起作用，但我也需要我的比例变换才能工作。我也知道 CSS“缩放”属性，但这不能满足我的需要。

基本上，我只是想让它工作，我不知道为什么这个正确的 CSS 在 Firefox 中突然被破坏了。如果有人有替代解决方案，那就太好了。

【问题讨论】：

测试用例？ jsfiddle.net 或 jsbin.com
我不确定问题是从哪个版本开始的，但最近两个版本的 Firefox 受到影响。 jsfiddle.net/9J5vc
所以在我上传的内容中，您会看到比例转换在 Firefox 中不起作用，但如果您将其更改为“-moz-transition: all .3s”，它会起作用。问题是我不能有定位动画。

标签： css firefox

【解决方案1】：

Ssssup doode，而不是 all 放入 transform。像这样：

-moz-transition: -moz-transform .3s, top 0s, left 0s;

示例：http://jsfiddle.net/9J5vc/3/

【讨论】：

【解决方案2】：

这是最新版本的 Firefox 的问题，而不是您的代码。目前，我有六个站点无法在 Firefox 中正确呈现 css。不超过一周前它们都很好，并且没有对代码或代码库进行任何更改。这些样式在其他浏览器中仍然有效。

Firefox 当前版本的浏览器存在问题，我相信他们都知道，但实际上，如果不尽快修复，他们将失去更多的市场份额。真是太可惜了。

【讨论】：

除了这里，mozilla 是否有记录的错误？

【解决方案3】：

这是 Firefox 中的一个错误：https://bugzilla.mozilla.org/show_bug.cgi?id=835007（类似问题：14533519，最近已针对 Firefox 21 里程碑进行了修复。在此之前，您不能将 all 用作多个转换的一部分，并且必须指定每个属性分开。

公平地说，只有most recent W3C draft 明确说明了这种行为； earlier versions 不太清楚这种情况应该如何处理。

【讨论】：

【解决方案4】：

这对我有用..

-moz-transition: bottom .3s, right .3s, top 0s, left 0s;

还要确保您的元素仍然定位。

【讨论】：

我正在使用“-moz-transform: scale”，我需要它来制作动画，就像我一直在使用“-moz-transition: all .3s”一样。唯一的问题是我需要定位自己而不是动画。这个 CSS 曾经有效，但在最新版本的 Firefox 中不再有效。