Multiple css3 transition types not using 'all'

I'm trying to transition both the scale and the opacity using CSS3 transitions - I can't work out how to transition multiple things without using all

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

works, as does:

transition: all 1s ease-in;

and

transition-function: opacity;

or

transition-function: scale;

but not

transition-function: scale, opacity;

See the example here: http://j开发者_运维技巧sfiddle.net/5PCGs/7/

Any help would be really appreciated! Thanks :) !

Edit:

I have worked out it's transition-property (thanks Simone), but now it's only animating opacity in Firefox, not both - http://jsfiddle.net/5PCGs/9 - compare this in FF and Chrome side-by-side

Thanks to Boris Zbarsky and Simone Vittori.

The answer was to use transition-property and in not specify all the things you're transforming in there, just put transform in as one of the values, and let the differences in the transforms between the classes take care of itself.

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

EDIT: Don't for get to add any prefixes you need to these. For Webkit browsers for example:

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

Thanks again!

Try to use transition-property instead of transition-function, that actually doesn't exist. :)

Each of the transition properties accepts a comma-separated list, allowing multiple transitions to be defined.