多个 css3 过渡类型不使用“全部”

Posted 2023-03-06

【中文标题】多个 css3 过渡类型不使用“全部”

【英文标题】：Multiple css3 transition types not using 'all'

【发布时间】：2011-11-15 12:28:04

【问题描述】：

我正在尝试使用 CSS3 过渡来过渡比例和不透明度 - 如果不使用 all

，我无法弄清楚如何过渡多个事物

transition-function: all;
transition-duration: 1s;
transition-timing-function: ease-in;

像这样工作：

transition: all 1s ease-in;

和

transition-function: opacity;

或

transition-function: scale;

但不是

transition-function: scale, opacity;

在此处查看示例：http://jsfiddle.net/5PCGs/7/

任何帮助将不胜感激！谢谢:)！

编辑：

我已经确定它是 transition-property（感谢 Simone），但现在它只是在 Firefox 中设置不透明度的动画，而不是两者 - http://jsfiddle.net/5PCGs/9 - 在 FF 和 Chrome 中并排比较

【问题讨论】：

ps：我使用的是供应商特定的前缀 - 只是在这里省略了它们以减少帖子长度。

【参考方案1】：

尝试使用transition-property 而不是transition-function，这实际上并不存在。 :)

每个转换属性都接受一个逗号分隔的列表，允许定义多个转换。

【讨论】：

是的，没有转换函数属性：w3.org/TR/css3-transitions/#transitions-

谢谢！那太棒了。它现在适用于 Chrome，但规模转换似乎根本不适用于 Firefox。我会继续看的！

在 Firefox 和 Chrome 中进行比较：jsfiddle.net/5PCGs/9 Chrome 可以，但 Firefox 不会为比例设置动画。如果您使用-moz-transform: scale(0);，它会，但是我不能在其中包含 opacity 属性。好奇怪！

@Trolleymusic 您无法从无转换（对应于scale(1)）转换为scale(1)。没有什么可以过渡的。如果您的转换确实发生了变化，则使用 -moz-transition-property: -moz-transform, opacity 可以正常工作。

@Boris，很明显！ :) -- 盒子的原始状态有transform: scale(0); 和.active 有transform: scale(1); 但你是说我应该使用-moz-transition-property: -moz-transform,opacity; 而不是使用-moz-transition-property: scale,opacity; 吗？那太棒了！谢谢鲍里斯！

【参考方案2】：

感谢Boris Zbarsky 和Simone Vittori。

答案是使用transition-property 并且不指定您要在其中转换的所有内容，只需将transform 作为值之一，并让类之间的转换差异得到照顾自己。

transition-property: transform,opacity;
transition-duration: 1s;
transition-timing-function: ease-in;

编辑： 不要为 get 添加任何您需要的前缀。以 Webkit 浏览器为例：

-webkit-transition-property: -webkit-transform,opacity;
-webkit-transition-duration: 1s;
-webkit-transition-timing-function: ease-in;

再次感谢！