多个css3过渡类型不使用'all'

Tro*_*sic 4 css firefox css3 css-transitions

我正在尝试使用CSS3过渡来转换比例和不透明度 - 我无法解决如何在不使用所有内容的情况下转换多个内容

transition-function: all;
transition-duration: 1s;
transition-timing-function: ease-in;
Run Code Online (Sandbox Code Playgroud)

工作,如:

transition: all 1s ease-in;
Run Code Online (Sandbox Code Playgroud)

transition-function: opacity;
Run Code Online (Sandbox Code Playgroud)

要么

transition-function: scale;
Run Code Online (Sandbox Code Playgroud)

但不是

transition-function: scale, opacity;
Run Code Online (Sandbox Code Playgroud)

请参阅此处的示例:http://jsfiddle.net/5PCGs/7/

任何帮助将非常感激!谢谢 :) !

编辑:

我已经解决了这个问题transition-property(感谢Simone),但现在它只是在Firefox中激活不透明,而不是两者兼而有之 - http://jsfiddle.net/5PCGs/9 - 在FF和Chrome中并排比较

Tro*_*sic 15

感谢Boris ZbarskySimone Vittori.

答案是使用transition-property和不指定你在那里转换的所有东西,只是transform作为其中一个值放入,并让类之间的转换中的差异自行处理.

transition-property: transform,opacity;
transition-duration: 1s;
transition-timing-function: ease-in;
Run Code Online (Sandbox Code Playgroud)

编辑:不要为这些添加你需要的任何前缀.例如,对于Webkit浏览器:

-webkit-transition-property: -webkit-transform,opacity;
-webkit-transition-duration: 1s;
-webkit-transition-timing-function: ease-in;
Run Code Online (Sandbox Code Playgroud)

再次感谢!